/* Hulurama supplied-artwork update v1.
   Local images only. Load after site.css. Keep unlayered so these narrowly scoped
   overrides win over the original theme's cascade layers and breakpoints. */

.site-header .header-inner {
  gap: 24px;
}
.site-header .mobile-menu {
  display: none;
}

.brand-logo {
  display: inline-block;
  width: 260px;
  max-width: 100%;
  flex: 0 0 auto;
  line-height: 0;
  border-radius: 4px;
}
.brand-logo picture,
.brand-logo img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.brand-logo:focus-visible {
  outline: 3px solid var(--lime, #c2f780);
  outline-offset: 5px;
}
.site-header .header-actions {
  min-width: 0;
}
.site-header .header-actions > .button.secondary {
  display: block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-footer .brand-logo {
  width: 230px;
}

/* The source already includes its own title and illustrated skyline.
   Keep controls outside the artwork and show the entire image without cropping. */
.hero.hero--branded {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 38px;
  padding: 44px 0 46px;
}
.hero--branded .hero-copy,
.hero--branded .hero-visual {
  min-width: 0;
}
.hero--branded .hero-copy h1 {
  font-size: clamp(46px, 4.55vw, 64px);
}
.hero--branded .hero-copy > p {
  max-width: 470px;
  font-size: 15px;
}
.hero--branded .hero-copy .button-row {
  gap: 10px;
}
.hero--branded .hero-copy .button {
  padding: 12px 15px;
  font-size: 11px;
}
.hero--branded .hero-visual {
  transform: none;
  box-shadow: 8px 8px 0 #0e2020;
  border-color: #355457;
  background: #102328;
}
.hero--branded .hero-coordinate {
  padding: 12px 17px;
}
.hulurama-hero-picture,
.hulurama-hero-picture img {
  display: block;
  width: 100%;
  height: auto;
}
.hulurama-hero-picture img {
  aspect-ratio: 1672 / 941;
  object-fit: contain;
  object-position: center;
}
.hero--branded .visual-caption {
  flex-wrap: wrap;
  padding: 13px 17px;
}
.hero--branded .hero-note {
  max-width: 440px;
}

@media (max-width: 1250px) {
  .site-header .header-inner { gap: 20px; }
  .site-header .brand-logo { width: 235px; }
  .hero.hero--branded { gap: 28px; }
  .hero--branded .hero-copy h1 { font-size: 50px; }
  .hero--branded .hero-copy > p { font-size: 14px; }
}

@media (max-width: 1050px) {
  .site-header .header-inner { padding: 13px 0; gap: 12px 22px; }
  .site-header .main-nav a { line-height: 34px; }
  .site-header .main-nav a.active::after { bottom: -4px; }
  .hero--branded .hero-copy h1 { font-size: 46px; }
  .hero--branded .hero-copy .eyebrow { line-height: 1.8; }
}

/* A single uncropped hero is more useful than tiny side-by-side columns here. */
@media (max-width: 900px) {
  .hero.hero--branded {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 30px 0 36px;
  }
  .hero--branded .hero-visual { order: 1; }
  .hero--branded .hero-copy { order: 2; }
  .hero--branded .hero-copy h1 { font-size: clamp(44px, 7.1vw, 62px); }
  .hero--branded .hero-copy > p { max-width: 620px; font-size: 15px; }
  .hero--branded .hero-note { max-width: none; }
}

@media (max-width: 760px) {
  .site-header .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    min-height: 82px;
    padding: 12px 0;
  }
  .site-header .brand-logo {
    grid-column: 1;
    grid-row: 1;
    width: min(210px, 100%);
  }
  .site-header .header-actions {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
  .site-header .header-actions > .button,
  .site-header .header-actions > .button.secondary {
    display: block;
    max-width: 98px;
    min-height: 36px;
    padding: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
  }
  .site-header .mobile-menu {
    grid-column: 3;
    grid-row: 1;
    width: 38px;
    height: 38px;
  }
  .site-header .main-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    width: 100%;
  }
  .site-header .main-nav a {
    font-size: 12px;
    line-height: 32px;
  }
  .hero.hero--branded {
    padding: 24px 0 32px;
    gap: 26px;
  }
  .hero--branded .hero-visual { box-shadow: 4px 4px 0 #0e2020; border-radius: 12px; }
  .hero--branded .hero-coordinate { padding: 10px 13px; font-size: 8px; }
  .hero--branded .visual-caption { gap: 6px; padding: 10px 13px; font-size: 7px; }
  .hero--branded .hero-copy h1 { font-size: clamp(43px, 9.3vw, 60px); margin: 14px 0 20px; }
  .hero--branded .hero-copy .button-row { margin-top: 22px; }
  .hero--branded .hero-copy .button { font-size: 11px; padding: 12px 14px; }
  .hero--branded .hero-note { font-size: 9px; margin-top: 18px; }
  .site-footer .brand-logo { width: 210px; }
}

@media (max-width: 360px) {
  .site-header .header-inner { gap: 8px; }
  .site-header .header-actions > .button,
  .site-header .header-actions > .button.secondary { max-width: 85px; font-size: 9px; padding: 10px 8px; }
  .hero--branded .hero-copy .button-row > .button { width: 100%; }
}

@media print {
  .hero.hero--branded { display: block; }
  .hero--branded .hero-visual { box-shadow: none; margin-block: 20px; }
}