@font-face {
    font-family: 'spot';
    src: url('https://cognition-public-storage.s3.ap-southeast-2.amazonaws.com/kirks-summer-promo/fonts/spot-normal-webfont.woff2') format('woff2'),
    url('https://cognition-public-storage.s3.ap-southeast-2.amazonaws.com/kirks-summer-promo/fonts/spot-normal-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@property --colour-a {
    syntax: "<color>";
    inherits: true;
    initial-value: #5A348B;
}

@property --colour-b {
    syntax: "<color>";
    inherits: true;
    initial-value: #FCE800;
}

@property --colour-c {
    syntax: "<color>";
    inherits: true;
    initial-value: #D5D900;
}

@property --colour-d {
    syntax: "<color>";
    inherits: true;
    initial-value: #723E9B;
}

@property --colour-e {
    syntax: "<color>";
    inherits: true;
    initial-value: #9747FF;
}

:root {

    --kirks-purple: #5A348B;
    --kirks-purple-light: #723E9B;
    --kirks-purple-x-light: #9747FF;
    --kirks-yellow: #FCE800;
    --kirks-green: #D5D900;
    --kirks-orange: #F08017;

    /*--colour-a: color-mix(in srgb, var(--kirks-purple), #333 50%);*/
    /*--colour-b: color-mix(in srgb, var(--kirks-yellow), #999 50%);*/
    /*--colour-c: color-mix(in srgb, var(--kirks-green), #ddd 50%);*/
    /*--colour-d: color-mix(in srgb, var(--kirks-purple-light), #999 50%);*/

    --colour-neutral-1000: hsl(0, 0%, 100%);
    --colour-neutral-900: hsl(0, 0%, 90%);
    --colour-neutral-800: hsl(0, 0%, 80%);
    --colour-neutral-700: hsl(0, 0%, 70%);
    --colour-neutral-600: hsl(0, 0%, 60%);
    --colour-neutral-500: hsl(0, 0%, 50%);
    --colour-neutral-400: hsl(0, 0%, 40%);
    --colour-neutral-300: hsl(0, 0%, 30%);
    --colour-neutral-200: hsl(0, 0%, 20%);
    --colour-neutral-100: hsl(0, 0%, 10%);
    --colour-neutral-0: hsl(0, 0%, 0%);

    --colour-background: var(--colour-a);
    --colour-background-stripe: color-mix(in srgb, var(--colour-c), transparent 50%);

    --colour-text: var(--colour-b);
    --colour-headline: var(--colour-b);
    --colour-legend: var(--colour-a);

    --colour-btn: var(--colour-b);
    --colour-btn-bg: var(--colour-a);
    --colour-btn-border: var(--colour-a);

    --colour-btn-hover: var(--colour-b);
    --colour-btn-hover-bg: var(--colour-e);
    --colour-btn-hover-border: var(--colour-e);

    --colour-btn-active: var(--colour-b);
    --colour-btn-active-bg: var(--colour-neutral-1000);
    --colour-btn-active-border: var(--colour-e);

    --colour-highlight: var(--colour-neutral-1000);

    --colour-form-bg: var(--colour-b);

    --colour-input: var(--colour-a);
    --colour-input-bg: var(--colour-neutral-1000);
    --colour-input-border: var(--colour-c);
    --colour-input-placeholder: var(--colour-c);

    --colour-input-check-border: var(--colour-a);

    --colour-invalid: #EC221F;
    --colour-invalid-border: #EC221F;
    --colour-valid: var(--colour-c);
    --colour-valid-border: var(--colour-c);

    --colour-focus-border: var(--colour-a);
    --colour-focus-shadow: color-mix(in srgb, var(--colour-valid), transparent 20%);
    --colour-focus-invalid-border: var(--colour-focus-border);
    --colour-focus-invalid-shadow: color-mix(in srgb, var(--colour-invalid), transparent 80%);

    --colour-roundel-bg: var(--colour-a);
    --colour-roundel-text: var(--colour-b);

    --colour-winners: var(--colour-neutral-1000);
    --colour-winners-bg: var(--colour-a);
    --colour-winners-headline: var(--colour-b);

    --mark-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='16' fill='none' %3E%3Cpath d='m3 3 8.2875 8.5L19.575 3' stroke='%235a348b' stroke-width='6' stroke-linecap='round'%2F%3E%3C%2Fsvg%3E");
    --mark-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='35'%3E%3Cpath fill-rule='evenodd' fill='%235a348b' d='M32.349 34.248H5.772A4.883 4.883 0 0 1 .894 29.37v-4.19a1.97 1.97 0 0 1 3.94 0v4.19c0 .518.421.938.938.938h26.577c.517 0 .938-.42.938-.938v-4.19a1.97 1.97 0 0 1 3.94 0v4.19a4.884 4.884 0 0 1-4.878 4.878Zm-5.655-21.586a1.966 1.966 0 0 1-1.409-.592l-4.26-4.358v15.77a1.97 1.97 0 0 1-3.94 0V7.712l-4.261 4.358a1.966 1.966 0 0 1-1.408.592 1.97 1.97 0 0 1-1.409-3.347l7.639-7.813.008-.007.016-.017.008-.007.019-.019.028-.026.016-.014.03-.027.029-.024a.858.858 0 0 1 .092-.071c.012-.01.024-.018.037-.027l.043-.03.039-.024.044-.027a.819.819 0 0 1 .04-.023l.044-.024.043-.022.012-.006.007-.003.024-.012a.834.834 0 0 0 .044-.019l.021-.009.023-.01.042-.016.026-.01.015-.005.007-.002a1.849 1.849 0 0 1 .093-.03l.039-.012.054-.014.039-.008c.018-.004.036-.009.055-.012l.04-.007.054-.009.043-.005.026-.004.026-.002.042-.003a.323.323 0 0 1 .031-.002l.022-.001.041-.001.036-.001H19.065l.037.001a.534.534 0 0 1 .062.002l.032.002.042.003.025.002.026.004.043.005.055.009.039.007c.019.003.038.008.056.012l.038.008.055.014.038.012.053.015.041.015.004.001.017.006.026.01.042.016.023.01c.008.002.015.006.022.009l.043.019.024.012.007.003.013.007.042.021c.015.008-.87.016.044.024a.52.52 0 0 1 .04.023l.045.027.038.024.044.03.036.027.044.032.034.028.014.011.029.024.03.027a.107.107 0 0 1 .016.014l.028.026.02.019.007.007a.25.25 0 0 1 .016.017.027.027 0 0 1 .008.007l7.639 7.813a1.97 1.97 0 0 1-1.408 3.347Z'/%3E%3C/svg%3E");
    --mark-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%235a348b' d='m6.564.75-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3E%3C/svg%3E");
    --mark-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23D5D900' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    --mark-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23EC221F' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23EC221F' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");

    --timing-colour: 0.15s;

    --font-family-sans-serif: "Roboto", sans-serif;
    --font-family-sans-serif-condensed: "Roboto Condensed", sans-serif;
    --font-family-body: garage-gothic, sans-serif;
    --font-family-headline: spot, sans-serif;

    font-size: 20px;
}

.colour-a {
    color: var(--colour-a);
    transition: color var(--timing-colour);
}

.colour-b {
    color: var(--colour-b);
    transition: color var(--timing-colour);
}

.colour-c {
    color: var(--colour-c);
    transition: color var(--timing-colour);
}

svg .colour-a {
    fill: var(--colour-a);
    transition: fill var(--timing-colour);
}

svg .colour-b {
    fill: var(--colour-b);
    transition: fill var(--timing-colour);
}

svg .colour-c {
    fill: var(--colour-c);
    transition: fill var(--timing-colour);
}

svg .roundel-bg {
    fill: var(--colour-roundel-bg);
    transition: fill var(--timing-colour);
}

svg .roundel-text {
    fill: var(--colour-roundel-text);
    transition: fill var(--timing-colour);
}

body {
    /*--colour-a: red;*/
    /*--colour-background: var(--kirks-orange);*/

    color: var(--colour-text);
    background: var(--colour-background);
    font-family: var(--font-family-body);
    letter-spacing: 0.02em;
    transition: background-color var(--timing-colour), color var(--timing-colour);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6,
legend {
    font-family: var(--font-family-headline);
    font-weight: normal;
    /*letter-spacing: 0.05em;*/
    line-height: 1;
    color: var(--colour-headline);
}

.smaller,
.minimals {
    font-size: 0.8em;
}

.text-wrap-balance {
    text-wrap: balance;
}

#app a:link, #app a:visited {
    color: var(--colour-text);
    text-decoration: underline;
}

#app a:hover, #app a:active {
    color: var(--colour-highlight);
}

#app .btn,
#app a.btn {
    background: var(--colour-btn-bg);
    color: var(--colour-btn);
    border: 2px solid var(--colour-btn-border);
    border-radius: 0.25em;
    font-family: var(--font-family-headline);
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 0.05em;
    padding: 0.3em 1.25em 0.2em;
    line-height: 1;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, background-size 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
}

#app .btn.btn-secondary,
#app a.btn.btn-secondary {
    background: var(--colour-neutral-900);
    color: var(--colour-secondary);
    border-color: var(--colour-btn-border);
}

#app .btn:hover,
#app .btn:focus,
#app .btn.btn-secondary:hover,
#app .btn.btn-secondary:focus {
    color: var(--colour-btn-hover);
    background: var(--colour-btn-hover-bg);
    border-color: var(--colour-btn-hover-border);

    box-shadow: none;
}

#app .btn:active {
    color: var(--colour-btn-active);
    background: var(--colour-btn-active-bg);
    border-color: var(--colour-btn-active-border);
}

#header {
    --colour-background: var(--colour-b);
    --colour-text: var(--colour-a);
    --colour-headline: var(--colour-a);

    background: var(--colour-background);
    /*background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs><pattern id="a" patternUnits="userSpaceOnUse" width="30" height="30" patternTransform="rotate(42.5)"><path stroke="%23D5D900" stroke-width="30" d="M0 0v30"/></pattern></defs><rect width="100%" height="100%" fill="url(%23a)"/></svg>');*/
    color: var(--colour-text);

    position: relative;
    transition: background-color var(--timing-colour);

    contain: paint;

    height: calc-size(auto,round(size,1px));
}

#header::before,
#main::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: var(--colour-background-stripe);
    mask-image: url(https://cognition-public-storage.s3.ap-southeast-2.amazonaws.com/kirks-summer-promo/images/stripe.svg);
    mask-size: 120px;
    mask-position: center bottom;

    transition: background-color var(--timing-colour);
}

#main::before {
    mask-position: center top;
}

.header-grid {
    display: grid;

    /*--colour-background: var(--colour-secondary);*/
    /*--colour-text: var(--colour-neutral-900);*/
    /*--colour-headline: var(--colour-neutral-900);*/
    /*--colour-highlight: var(--colour-neutral-0);*/

    /*background: var(--colour-background);*/
    /*color: var(--colour-text);*/

    grid-template-areas:
            '. win-lockup win-lockup .'
            'hero hero hero hero'
            '. plus . .'
            '. info info .';

    grid-template-columns: 1rem 2fr 1fr 1rem;
    gap: 1.5rem 0;
    padding-block: 2rem;

    position: relative;
    isolation: isolate;
}

.win-lockup {
    grid-area: win-lockup;
    max-width: 100%;
    text-align: center;
    z-index: 1;
}

.kirks-logo {
    max-width: 50%;
    margin-bottom: 15px;
}

.hero-image {
    grid-area: hero;
    position: relative;
}

.hero-image img {
    aspect-ratio: 1.3;
    width: 140%;
    left: -20%;
    margin-top: -15%;
    object-fit: cover;
    object-position: 50% 30%;
    border-radius: 100%;
    position: relative;
}

.to-be-won {
    position: absolute;
    top: 90%;
    right: 1rem;
    width: 30%;
}

.plus-egift-cards {
    grid-area: plus;
    text-align: left;
}

.header-info {
    grid-area: info;
    text-align: left;
}

.header-info h2 {
    font-size: 5vw;
}

.header-minimals {
    grid-area: minimals;
    align-self: end;
    text-align: center;
    font-size: clamp(8px, 0.8rem, 3vw);
}

#main {
    position: relative;

    --colour-background: var(--colour-b);
    --colour-text: var(--colour-a);
    --colour-headline: var(--colour-a);

    background: var(--colour-background);
    color: var(--colour-text);

    --arc-height: 50px;

    padding-bottom: var(--arc-height);
    mask-image: linear-gradient(black 0 0), url("https://cognition-public-storage.s3.ap-southeast-2.amazonaws.com/kirks-summer-promo/images/footer-arc-mask.svg");
    mask-repeat: no-repeat;
    mask-size: 100% calc(100% - var(--arc-height)), 100% var(--arc-height);
    mask-position: center top, center bottom;
}

#footer {
    /*--colour-background: var(--colour-a);*/
    /*--colour-text: var(--colour-neutral-900);*/
    /*--colour-highlight: var(--colour-neutral-0);*/

    /*background: var(--colour-background);*/
    /*color: var(--colour-text);*/
}

#footer .links {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    text-transform: uppercase;
    font-family: var(--font-family-headline);
    font-weight: normal;
    letter-spacing: 0.05em;
    padding: 1rem 0;
    font-size: 1.8rem;
    gap: 1rem;
}

#footer .links > * {
    margin: 0;
    line-height: 1;
}

#footer .participating-brands {
    display: grid;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    gap: 0.5em;

    grid-template-areas:
            'text text text text'
            '. . . .'
            '. . . .';

    max-width: 50em;
    margin: 1rem auto;

    font-weight: bold;
}

#footer .participating-brands-text {
    grid-area: text;
}

#footer .participating-brands-logo {
    max-width: 100%;
}

#footer .minimals {
    font-family: var(--font-family-sans-serif-condensed);
    font-size: 0.55rem;
    line-height: 1.2;
}

#footer .links a:link,
#footer .links a:visited {
    /*text-decoration: underline;*/
    text-decoration: none;
}

#footer a:hover,
#footer a:active {
    /*color: var(--colour-neutral-900);*/
}

#footer img.logo {
    /*opacity: 30%;*/
}

.socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.socials .icon {
    width: 2rem;
    height: auto;
}

.modal-backdrop {
    background-color: transparent;
    backdrop-filter: blur(10px);
}

.modal-backdrop.show {
    opacity: 1;
}

.modal-content {
    --colour-background: var(--colour-neutral-1000);
    --colour-text: var(--colour-a);
    --colour-headline: var(--colour-a);

    background: var(--colour-background);
    color: var(--colour-text);

    border: 3px solid var(--colour-c);
    border-radius: 30px;
    padding: 15px;
    box-shadow: 3px 6px 6px 0 rgba(35, 50, 31, 0.30);
}

@media (min-width: 576px) {
    .header-info h2 {
        font-size: 1.5rem;
    }
}

@media (min-width: 768px) {
    .header-grid {
        grid-template-areas:
                '. win-lockup . hero .'
                '. plus . hero .'
                '. info . hero .';
        grid-template-columns: 1rem 1fr 1rem 1fr 2rem;
        grid-template-rows: auto;
        align-items: center;
        gap: 2rem 0;
    }

    .header-info {
        text-align: center;
    }

    .hero-image img {
        aspect-ratio: 1;
        width: 100%;
        left: 0;
        top: 0;
        margin-top: 0;
        object-position: 50% 50%;
    }

    .kirks-logo {
        max-width: 33%;
    }

    .to-be-won {
        top: auto;
        bottom: -1rem;
        right: -1rem;
    }

    .plus-egift-cards {
        text-align: center;
    }

    .plus-egift-cards .plus-coles-prizes {
        max-width: 80%;
    }

    .header-info {
        padding: 0;

        text-align: center;
        align-items: center;

    }

    .header-info h2 {
        font-size: 1.5rem;
    }

    #main {
        --arc-height: 75px;
    }

}

@media (min-width: 992px) {
    .header-grid {
        grid-template-columns: 1rem 100fr 1rem 85fr 2rem;
    }

    #footer .links {
        flex-direction: row;
        font-size: 1rem;
        align-items: stretch;
        gap: 1.5rem;
    }

    #footer .links a {
        /*padding-right: 1em;*/
        margin: 0;
        /*border-right: 1px solid var(--colour-neutral-0);*/
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #footer .links a:last-child {
        border-right: none;
    }
}

@media (min-width: 1200px) {
    .header-grid {
        grid-template-columns: 1rem 100fr 1rem 85fr 2rem;
    }

    #footer .links {
        /*font-size: 1rem;*/
    }
}