/* Our lovely fancy front page */
/* latin-ext */
@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 400;
    src: local('Noto Serif'), local('NotoSerif'), url('https://fonts.gstatic.com/s/notoserif/v8/ga6Iaw1J5X9T9RW6j9bNfFkWaDq8fMVxMw.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    font-display: swap;
  }
  /* latin */
@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 400;
    src: local('Noto Serif'), local('NotoSerif'), url('https://fonts.gstatic.com/s/notoserif/v8/ga6Iaw1J5X9T9RW6j9bNfFcWaDq8fMU.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    font-display: swap;
}
/* latin-ext */
@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 700;
    src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url('https://fonts.gstatic.com/s/notoserif/v8/ga6Law1J5X9T9RW6j9bNdOwzfRmece9LOocoDg.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    font-display: swap;
  }
  /* latin */
  @font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 700;
    src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url('https://fonts.gstatic.com/s/notoserif/v8/ga6Law1J5X9T9RW6j9bNdOwzfReece9LOoc.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    font-display: swap;
}

:root {
    --hp-section-margin: 40px;
}

@media screen and (max-width: 480px) {
    :root {
        --hp-section-margin: 60px;
    }
}

.hp-heading {
    position: relative;
    margin-bottom: 5px;
}

.hp-heading h2 {
    font-size: 2rem;
    margin: 0;
    position: relative;
    z-index: 1;
}

.hp-heading img, .hp-heading svg {
    height: 96px;
    width: auto;
    transform: rotate(-15deg);
    position: absolute;
    left: -35px;
    top: -35px;
}

.hp-heading .alt-rot {
    transform: rotate(15deg);
    top: -25px;
}

/* 1. Feature -- moved to critical*/

/** 2. Feature related */
.feature-related-container {
    margin: 25px 0 var(--hp-section-margin);
}
.feature-related {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 80px;
    gap: 10px;
    margin-bottom: 20px;
}

@keyframes feature-related-pulse {
    0% {
        box-shadow: 0 0 0 0 #7623ff;
    }

    100% {
        box-shadow: 0 0 0 180px #7623ff;
    }
}

.feature-related-more-container {
    flex-grow: 3;
}

.feature-related-more {
    display: grid;
    place-items: center;
    background: #451395;
    border-radius: 5px;
    min-width: 80px;
    height: 100%;
    overflow: hidden;
}
.feature-related-more div {
    width: 50px;
    text-align: center;
    transform: rotate(-5deg);
    border-radius: 8px;
    color: white;
}

.feature-related-more:hover div {
    background: #7623ff;
    animation: feature-related-pulse 0.5s;
    animation-fill-mode: forwards;
}

@media screen and (max-width: 900px) {
    .feature-related {
        grid-template-columns: repeat(2, 1fr) 80px;
    }
    .feature-related>*:nth-child(3) {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .feature-related {
        grid-template-columns: auto;
        grid-template-rows: repeat(4, auto);
    }

    .feature-related>*:nth-child(3) {
        display: initial;
    }

    .feature-related-more div {
        width: auto;
        transform: unset;
        margin: 10px;
    }

    .feature-related-more {
        width: 240px;
        margin-inline: auto;
        min-height: 48px;
    }
}

.hp-card {
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .1);
    background-color: #fff;
}

/** 3. Standard article moved to critical */

/** 4. News box */
.hp-news-box {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23a69aff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
    border-radius: 5px;
    color: black;
    padding: 20px;
    margin: 40px 0;
    width: 100%;
    box-shadow: 2px 2px 5px rgba(0,0,0,.05);
    margin-top: 0;
    margin-bottom: var(--hp-section-margin);
    z-index: 1;
    position: relative;
}

.hp-news-articles {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.hp-pr-meta {
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.hp-pr-meta {
    font-size: 0.75rem;
    text-transform: uppercase;
    display: flex;
    gap: 10px;
}

.hp-pr-category {
    color: #4a46ff;
    font-weight: 700;
}

.hp-pr-title {
    font-size: 1.1rem;
    font-family: "Noto Serif", serif;
}

.hp-pr {
    margin: 0;
}

@media screen and (max-width: 480px) {
    .hp-pr-title {
        font-size: 0.9rem;
    }
    .pr-box {
        padding-inline: 10px;
    }
}

.hp-pr-more {
    text-align: right;
    font-weight: 500;
}

/** 5. Half grid */
.homepage-grid-half {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.article-half {
    flex-basis: 360px;
    flex-grow: 1;
    flex-shrink: 2;
    margin-bottom: 0;
    font-size: 1rem;
}

.article-half a {
    display: grid;
    grid-template-columns: min(50%, 150px) 1fr;
    gap: 5px;
    height: 100%; /* fix image when neighbour is vertically stretched by text */
}

.article-half img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.article-half--meta {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px;
}
.article-half--title {
    line-height: 1.15;
    display: inline-block;
    font-weight: 500;
}

.article-half--date {
    color: #686868;
    font-size: 0.9rem;
    font-weight: 300;
}

@media screen and (max-width: 480px) {
    .homepage-grid-half {
        gap: 3px;
    }
    .article-half {
        font-size: 0.9rem;
    }
}

/** 6. Square grid */
.article-grid {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 20px;
}
.article-square {
    flex-basis: 250px;
    flex-grow: 1;
    flex-shrink: 1.5;
    margin-bottom: 0;
}

.article-square a {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 5px;
}

.article-square img {
    width: 100%;
    height: auto;
    /* enforce fb-fi aspect */
    aspect-ratio: 41 / 20;
    object-fit: cover;
}

.article-square--title {
    line-height: 1.5;
    display: inline-block;
    font-weight: 500;
    font-size: 1rem;
}

.article-square--date {
    color: #686868;
    font-size: 0.9rem;
    font-weight: 300;
}

/** 7. Special widget */

.homepage-special-widget--title {
    display: inline-block;
    border: 5px solid #4a46ff;
    border-radius: 5px;
    padding: 5px 15px;
    box-shadow: 8px 8px #00ff98;
    position: relative;
    top: 20px;
    z-index: 1;
    background: white;
    font-size: 2rem;
    margin-bottom: 0;
    max-width: 80%;
}

.homepage-special-widget {
    --shadow-color: #00ff98;
    border-radius: 5px;
    box-shadow: 0 0 0 5px #4a46ff, 16px 16px var(--shadow-color);
    border: 5px solid var(--shadow-color);
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238a44ff' fill-opacity='0.07'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    margin-bottom: var(--hp-section-margin);
    margin-inline: auto;
    width: calc(100% - 40px);
    padding: 40px 20px 20px;
}

@media screen and (max-width: 420px) {
    .homepage-special-widget {
        width: calc(100% - 20px);
    }
    .homepage-special-widget--title {
        right: 5px;
    }
}
.homepage-special-widget article {
    margin-bottom: 0;
}

.homepage-special-widget--feature {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    max-width: 480px;
    margin-inline: auto;
    line-height: 1.5;
}

.homepage-special-widget--article-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 640px;
    margin-inline: auto;
    margin-top: 40px;
}

.homepage-special-widget--sub a {
    display: grid;
    grid-template-columns: min(50%, 150px) 1fr;
    gap: 5px;
}

.homepage-special-widget--sub img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.homepage-special-widget--sub--meta {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}
.homepage-special-widget--sub--title {
    font-size: 1.15rem;
    line-height: 1.35;
    display: inline-block;
    font-weight: 500;
}

.homepage-special-widget--sub--date {
    color: #686868;
    font-size: 0.9rem;
    font-weight: 300;
}

.homepage-special-widget--more-link {
    margin-top: 10px;
    font-size: 1.25rem;
    font-weight: 500;
    text-align: right;
}

@media screen and (max-width: 640px) {
    .homepage-special-widget {
        padding-inline: 5px;
    }
    .homepage-special-widget--sub a {
        grid-template-columns: max(30%, 96px) 1fr;
    }

    .homepage-special-widget--feature {
        font-size: 1.1rem;
        font-weight: 500;
    }

    .homepage-special-widget--sub--title {
        font-size: 1rem;
        line-height: 1.15;
    }

    .homepage-special-widget--more-link {
        margin-right: 5px;
    }
}

/* Hacky fix to prevent page blowing up */
.homepage-special-widget--sub,
.article-half {
    max-height: 110px;
}