/* AvenSci Publishing — fidelity correction to the approved reference.
   Main issue fixed: the live page was much too narrow and visually compressed. */

/* Make the page occupy the viewport like the reference mockup. */
.fm-wrap{
    width: calc(100vw - 64px) !important;
    max-width: 1540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Header proportions */
.fm-header{
    height: 96px !important;
}
.fm-logo{
    flex: 0 0 330px !important;
}
.fm-logo img{
    width: 305px !important;
}
.fm-nav{
    gap: 31px !important;
    font-size: 14px !important;
}
.fm-submit{
    padding: 10px 22px !important;
    min-height: 38px !important;
}

/* Hero proportions much closer to approved reference */
.fm-hero{
    min-height: 330px !important;
}
.fm-hero__inner{
    min-height: 330px !important;
}
.fm-hero__copy{
    width: 47% !important;
    padding-left: 28px !important;
}
.fm-hero h1{
    font-size: 54px !important;
    line-height: 1.06 !important;
}
.fm-hero p{
    font-size: 16px !important;
    max-width: 535px !important;
}

/* The artwork is no longer confined to a narrow central block.
   It occupies the right half of the hero and starts nearer the center. */
.fm-hero::after{
    width: 64% !important;
    right: -1% !important;
    top: 0 !important;
    bottom: 0 !important;
    background-size: contain !important;
    background-position: center bottom !important;
}

/* Softer fade so DNA/book visibly blend behind the text rather than form a hard block. */
.fm-hero::before{
    background:
      linear-gradient(
        90deg,
        #ffffff 0%,
        rgba(255,255,255,.99) 27%,
        rgba(255,255,255,.94) 38%,
        rgba(255,255,255,.73) 48%,
        rgba(255,255,255,.30) 61%,
        rgba(255,255,255,.05) 76%,
        rgba(255,255,255,0) 100%
      ) !important;
}

/* Three audience cards use nearly the full available width. */
.fm-audience{
    padding-top: 10px !important;
}
.fm-audience__grid{
    gap: 14px !important;
}
.fm-audience-card{
    min-height: 154px !important;
    padding: 22px 24px !important;
    grid-template-columns: 78px 1fr !important;
}
.fm-circle{
    width: 68px !important;
    height: 68px !important;
}
.fm-audience-card h3{
    font-size: 18px !important;
}
.fm-audience-card p{
    font-size: 14px !important;
}

/* Latest publications: larger covers and wider row, like the reference. */
.fm-latest{
    padding-top: 12px !important;
}
.fm-latest__grid{
    grid-template-columns: 280px 1fr !important;
    gap: 42px !important;
}
.fm-latest h2{
    font-size: 22px !important;
}
.fm-books{
    grid-template-columns: repeat(5, minmax(155px, 180px)) !important;
    gap: 30px !important;
}
.fm-cover{
    height: 236px !important;
}

/* Footer should also visually span the page, not sit as a narrow island. */
.fm-footer__main{
    gap: 38px !important;
    padding-top: 30px !important;
    padding-bottom: 25px !important;
}
.fm-footer__brand img{
    width: 205px !important;
}
.fm-footer p,
.fm-footer a{
    font-size: 12px !important;
}
.fm-footer h4{
    font-size: 12px !important;
}

/* Wide desktop screens */
@media (min-width: 1600px){
    .fm-wrap{
        width: calc(100vw - 90px) !important;
        max-width: 1640px !important;
    }
    .fm-hero h1{
        font-size: 58px !important;
    }
    .fm-hero::after{
        width: 62% !important;
        right: 1% !important;
    }
    .fm-books{
        grid-template-columns: repeat(5, 185px) !important;
    }
    .fm-cover{
        height: 248px !important;
    }
}

@media(max-width:1000px){
    .fm-wrap{
        width: calc(100vw - 32px) !important;
        max-width: none !important;
    }
    .fm-nav{gap:14px !important}
    .fm-hero::after{
        width:60% !important;
        right:0 !important;
    }
    .fm-books{
        grid-template-columns:repeat(4,1fr) !important;
    }
}

@media(max-width:760px){
    .fm-wrap{
        width: calc(100vw - 24px) !important;
    }
    .fm-header{
        height:auto !important;
    }
    .fm-logo{
        flex:0 0 205px !important;
    }
    .fm-logo img{
        width:200px !important;
    }
    .fm-hero{
        min-height:430px !important;
    }
    .fm-hero__inner{
        min-height:430px !important;
    }
    .fm-hero__copy{
        width:100% !important;
        padding-left:0 !important;
    }
    .fm-hero h1{
        font-size:39px !important;
    }
    .fm-hero::after{
        width:100% !important;
        right:0 !important;
        top:145px !important;
        opacity:.46 !important;
    }
    .fm-books{
        grid-template-columns:repeat(2,1fr) !important;
    }
}