/* The supplied artwork is the brand. This final layer owns only its responsive placement. */
.top{
  display:grid!important;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:4px!important;
  min-height:0!important;
  padding:5px clamp(10px,1.8vw,26px) 7px!important;
  overflow:hidden;
}
.brand-home.brand-artwork{
  grid-row:1;
  display:block!important;
  width:100%;
  max-width:none!important;
  min-width:0;
  margin:0!important;
  padding:0!important;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--st-brand-gold) 24%,var(--st-border))!important;
  border-radius:14px;
  background:#f7f3eb!important;
  box-shadow:0 5px 22px color-mix(in srgb,var(--st-text) 8%,transparent);
}
.brand-artwork-row{
  display:grid;
  grid-template-columns:clamp(58px,7.5vw,92px) minmax(260px,1.75fr) minmax(210px,1fr);
  align-items:center;
  width:100%;
  min-width:0;
  height:clamp(72px,8vw,104px);
  gap:clamp(8px,1.5vw,24px);
  padding:3px clamp(8px,1.3vw,18px);
}
.brand-artwork-row img{display:block;width:100%;max-width:100%;object-fit:contain;filter:none!important}
.brand-artwork-logo{height:100%;object-position:left center}
.brand-artwork-title{height:auto;object-position:center}
.brand-artwork-slogan{height:auto;object-position:right center}
.brand-home.brand-artwork:hover{
  transform:none!important;
  border-color:color-mix(in srgb,var(--st-brand-gold) 54%,var(--st-border))!important;
  background:#fbf8f1!important;
}
.brand-home.brand-artwork:focus-visible{outline:3px solid var(--ct-accent)!important;outline-offset:2px!important}
.top .actions{
  grid-row:2;
  justify-self:end;
  min-height:42px;
  margin:0!important;
}

@media(max-width:900px){
  .top{padding:4px 8px 6px!important}
  .brand-artwork-row{
    grid-template-columns:clamp(50px,9vw,68px) minmax(180px,1.65fr) minmax(145px,1fr);
    height:clamp(62px,11vw,82px);
    gap:8px;
    padding:2px 7px;
  }
}

@media(max-width:620px){
  .top{display:grid!important;grid-template-columns:1fr!important;gap:3px 0!important;padding:3px 5px 5px!important}
  .brand-home.brand-artwork{grid-column:1;grid-row:1;border-radius:10px}
  .brand-artwork-row{
    grid-template-columns:clamp(42px,14vw,56px) minmax(128px,1.7fr) minmax(92px,1fr);
    height:clamp(54px,17vw,70px);
    gap:4px;
    padding:2px 4px;
  }
  .top .actions{grid-column:1;grid-row:2;justify-self:end;min-height:40px}
}

@media(max-width:390px){
  .brand-artwork-row{grid-template-columns:40px minmax(116px,1.7fr) minmax(84px,1fr);height:54px;gap:3px}
}

@media(prefers-reduced-motion:reduce){.brand-home.brand-artwork{transition:none!important}}