:root {
    --shadow-grey: color(from var(--grey) srgb r g b / 0.3);
    --card-shadow: 0 0 5px 0 var(--shadow-grey);
    --hover-shadow: 0 0 10px 3px var(--shadow-grey);
    --active-shadow: 0 0 10px 0px color(from var(--grey) srgb r g b / 0.2);
    --expanded-shadow: 0px 0px 14px 8px var(--shadow-grey);
}

.cards-grid {
    max-width: 960px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card {
    box-shadow: var(--card-shadow);
    position: relative;
    cursor: pointer;
    border-radius: 5px;
}

.card:hover {
    box-shadow: var(--hover-shadow);

    & .card-thumbnail, .blur {
        transform: scale(1.01);
    }
}

.card-thumbnail {
    width: 100%;
    border-radius: 5px;
    max-height: 410px;
    height: 410px;
    object-fit: cover;
    object-position: top;
    anchor-name: --card-thumbnail;
}

.card-text {
    --offset: 5px;
    padding: 3rem 4rem calc(1rem + var(--offset)) calc(1rem + var(--offset));
    position-anchor: --card-thumbnail;
    bottom: calc(anchor(bottom) - var(--offset));
    left: calc(anchor(left) - var(--offset));
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
    z-index: 2;
}

.card-text-shadow {
    --offset: 5px;
    filter: drop-shadow(var(--shadow-grey) 2px -2px 5px);
    position: absolute;
    position-anchor: --card-thumbnail;
    bottom: calc(anchor(bottom) - var(--offset));
    left: calc(anchor(left) - var(--offset));
    z-index: 2;
    /* makes the shadow work properly on safari */
    transform: translateZ(0);
}

.card-title {
    line-height: 0.9em;
    letter-spacing: -3%;
    margin-bottom: 0;
    anchor-name: --card-title;
}

.card-color1 {
    background-color: #ACDDDE;
}

.card-color2 {
    background-color: #C0EBC7;
}

.card-color3 {
    background-color: #D55C00;
    & a {
        color: var(--sand);
    }

    & a:hover {
        color: var(--light-sand);
    }
}

.card-color4 {
    background-color: #F0E442;
}

.blur {
    position: absolute;
    inset: auto 0 0 0;
    backdrop-filter: blur(3px);
    z-index: 1;
    height: 410px;
    border-radius: 5px;
    
    display: none;
}

.expanded-card {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 1.5rem;
    display: none;
    box-shadow: var(--expanded-shadow);
}

.expanded-text {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.expanded-image {
    width: 100%;
    border-radius: 5px;
    margin-top: 1.25rem;
}

dialog {
    border-style: none;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    overscroll-behavior: contain;
}

dialog::backdrop {
    background-color: rgba(0,0,0,0.7);
    overscroll-behavior: contain;
    overflow: hidden;
}

.dialogImage {
    width: 100%;
    max-height: 100vh;
    max-width: 100vw;
    object-fit: contain;
}

.dialogClose {
    width: 30px;
    position: fixed;
    top: 30px;
    left: 30px;
    border: none;
    background-color: var(--off-white);
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.close {
    display: none;
    width: 25px;
    position: absolute;
    position-anchor: --card-title;
    right: anchor(left);
    top: anchor(top);
    margin-right: 1rem;
    border: none;
    background-color: var(--off-white);
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.active-card {
    box-shadow: var(--active-shadow);

    & .blur {
        display:block;
    }

    & .close {
        display: block;
    }

    & .card-text-shadow {
        filter: drop-shadow(var(--shadow-grey) 9px -9px 5px);
        bottom: calc(anchor(bottom) - var(--offset) - 1.5rem);
        left: calc(anchor(left) - 75vw);
    }

    & .card-text {
        padding-left: calc(75vw);
        cursor: default;
    }
}

.active-card:hover {
    box-shadow: var(--active-shadow);

    & .card-thumbnail,
        .blur {
            transform: scale(1);
        }
}

.card:has(~ .active-card) {
    & .card-text {
        bottom: calc(anchor(bottom) + 2.3rem);
    }
}

.active-expanded-card {
    display: block;
}

ul[role='list'] {
    list-style: none;
    padding-left: 0;
}

ul[role='list'] li {
    position: relative;
    padding-left: 0;
}

ul[role='list'] li:first-child {
    margin-top: 1.5rem;
}

ul[role='list'] li:nth-child(even) {
    margin-bottom: 1.5rem;
}

ul[role='list'] li:last-child {
    margin-bottom: 0.6rem;
}

@counter-style --challenges {
    system: cyclic;
    symbols: "Challenge: " "Solution: ";
}

ul[role='list'] li::before {
    position: absolute;
    inset-inline-start: -7.25rem;
    width: 6rem;
    text-align: right;
    content: counter(list-item, --challenges);
}

.challenge {
    font-weight: 700;
    font-style: italic;
}

@media screen and (max-width: 950px) {
    .cards-grid {
        display: block;
    }

    .card {
        margin-top: 2rem;
        width: 100%;
        aspect-ratio: 1.52;
    }

    .card:first-child {
        margin-top: 0;
    }

    .card-thumbnail {
        aspect-ratio: 1.52;
        max-height: fit-content;
        height: fit-content;
    }

    .card-text {
        padding-top: 1rem;
    }

    .card-title {
        width: min-content;
    }

    .blur {
        aspect-ratio: 1.52;
        width: 100%;
        height: auto;
    }

    .active-card {
        margin-bottom: 0;
    }

    .close {
        left: anchor(right);
        margin-left: 1rem;
        right: none;
    }
}

@media screen and (max-width: 640px) {
    ul[role='list'] li::before {
        position: static;
    }

    .card:last-of-type {
        margin-bottom: 0;
    }

    /* gets rid of the long bar when zooming on mobile, but adds the limit to the shadow on the lhs */
    .active-card {
        & .card-text-shadow {
            left: calc(anchor(left) - 1.25rem);
        }

        & .card-text {
            padding-left: 1.25rem;
        }
    }

    .card:hover { 
        & .card-thumbnail,
        .blur {
            transform: scale(1.00);
        }
    }
}
/* html {
    
} */

@font-face {
    font-family: 'Clash Display';
    src: url('fonts/ClashDisplay-Variable.woff2') format('woff2');
    font-weight: 200 700;
    font-display: swap;
    font-style: normal;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Josefin Sans", 'Helvetica', sans-serif;
}

:root {
    /* Palette colours */
    --grey: #595959;
    --off-white: #F9F6EE;
    --main-green: #005a04;
    --main-yellow: #f8b900;
    --border-grey: #59595988;
    --main-orange: #f08637;

    /* --sand: #ecd494; */
    --sand: #FFDD80;
    --light-sand: #FBECC2;

    /* Colour variables */
    --main-font-color: var(--grey);
    --h1-font-color: var(--off-white);
    --main-background-color: var(--off-white);
    --header-background-color: var(--main-green);
    --banner-background-color: var(--main-yellow);
    --accent-color: var(--main-orange);
    --link-color: var(--main-orange);
    --link-hover-color: var(--main-green);
    --info-border-color: var(--border-grey);
    /* --code-background-color: color(from var(--sand) srgb r g b /0.4); */
    --code-background-color: var(--light-sand);
}

body {
    color: var(--main-font-color);
    background-color: var(--main-background-color);
    min-height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    line-height: 1.2;
}

/* Header sizes increase in a 2:3 ratio -- modularscale.com */
h1 {
    font-family: 'Clash Display';
    font-size: 3.375rem;
    font-weight: 600;
    padding: 0.75rem 0 0.75rem 0;
    line-height: 1;
    text-align: center; 
    color: var(--h1-font-color);
}

h2 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

h2:first-child {
    margin-top: 0;
}

h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

h4 {
    font-size: 1.25rem;
    font-style: italic; 
    font-weight: 600;
}

p, li {
    margin: 1rem auto 1rem auto;
    font-size: 1.15rem;
    line-height: 1.5;
    /* text-align: justify; */
    letter-spacing: -2%;
    text-wrap: pretty;
}


h2 + p {
    margin-top: 0.5rem;
}

h3 + p {
    margin-top: 0.5rem;
}

pre {
    width: 100%;
    background: var(--code-background-color);
    padding: 0.5rem;
    margin: 0 auto 1rem auto;
    line-height: 1.1;
    font-size: 0.925em;
    overflow-x: scroll;
}

code {
    font-family: 'Inconsolata', 'monospace';
    font-weight: 500;
    font-size: 0.925em;
    border-radius: 2px;
    padding: 2px;
    background: var(--code-background-color);
}

pre > code {
    background: none;
}

a {
    /* font-size: 1rem; */
    text-decoration: underline;
    color: var(--link-color);
}

a:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

figcaption {
    line-height: 1.5;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    letter-spacing: -2%;
}

ul {
    padding-left: 1.5rem;
}

li {
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
    padding-left: 0.5rem;
}

ul ul {
    padding-left: 1.5rem;
}

sup, sub {
    font-size: 66%;
}

.light-font {
    color: var(--off-white);
}

.light-links {
    & a {
        color: var(--light-sand);
    }

    & a:hover {
        color: var(--sand);
    }
}

img {
    display: block;
}

.centre {
    margin-left: auto;
    margin-right: auto;
}

p:has(+ .footnotes-sep) {
    margin-bottom: 1.5rem;
}

.footnotes {
    margin-top: 1.5rem;
    margin-bottom: 0;
}

.footnotes-list {
    padding-left: 1rem;
}

.footnote-item {
    margin-top: 0.25rem; 
    margin-bottom: 0.25rem;
    font-size: 0.9rem;

    & p {
        font-size: 0.9rem;
        line-height: 1.5;
    }
}

label {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.grid {
    max-width: 960px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.25rem;
    padding: 0 1.25rem;
}

.subgrid {
    display: grid;
    grid-template-columns: subgrid;
}

.col-start-1 {
    grid-column-start: 1;
}

.col-start-2 {
    grid-column-start: 2;
}

.col-start-3 {
    grid-column-start: 3;
}

.col-start-4 {
    grid-column-start: 4;
}

.col-start-7 {
    grid-column-start: 7;
}

.col-span-2 {
    grid-column-end: span 2;
}

.col-span-3 {
    grid-column-end: span 3;
}

.col-span-4 {
    grid-column-end: span 4;
}

.col-span-5 {
    grid-column-end: span 5;
}

.col-span-6 {
    grid-column-end: span 6;
}

.col-span-7 {
    grid-column-end: span 7;
}

.col-span-8 {
    grid-column-end: span 8;
}

.col-span-10 {
    grid-column-end: span 10;
}

.col-span-12 {
    grid-column-end: span 12;
}

.margin-top-0 {
    margin-top: 0;
}

.margin-bottom-0 {
    margin-bottom: 0;
}

@media screen and (max-width: 640px) {
    .sm\:col-span-10 {
        grid-column-end: span 10;
    }

    .sm\:col-span-12 {
        grid-column: span 12 / span 12;
    }

    .sm\:margin-top {
        margin-top: 1rem;
    }

    .sm\:margin-bottom {
        margin-bottom: 1rem;
    }
}

header {
    width: 100%;
    background: var(--header-background-color);
    padding: 0 1.25rem; /*25vw;*/
    display: flex;
    justify-content: center;
}

nav {
    padding: 0.5rem 0;
    width: 960px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    & ul {
        margin: 0;
        padding: 0.875rem 0 0.5rem 0;
        list-style-type: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    & li, li:last-child {
        margin: 0;
        padding: 0;
    }
}

.home-link, .home-link:visited, .home-link:hover  {
    font-family: 'Clash Display';
    display: inline-block;
    color: var(--off-white);
    font-weight: 600;
    font-size: 2rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
    text-decoration: none;
}

.logo {
    float: left;
    margin-bottom: 2px;
    margin-top: 2px;
}

.nav-link {
    color: var(--off-white);
    font-size: 1.5rem;
    padding: 0.28125rem 1rem 0rem 1rem;
    text-decoration: none;
}

.nav-link:link:hover {
    color: var(--off-white);
    text-decoration: underline;
    font-weight: initial;
}

.nav-link:visited{
    color: var(--off-white);
}

@media screen and (max-width: 450px) {
    nav {
        justify-content: space-around;

        & ul {
            padding-top: 0.5rem;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            padding: 0;
            justify-items: center;
        
            & .about {
                grid-column: 1;
            }
        
            & .projects {
                grid-column: 2;
            }
        
            & .blog {
                grid-column: 3;
            }
        
            & .contact {
                grid-column: 2;
            }
        }
    }

    .home-link, .home-link:hover, .home-link:visited {
        padding-bottom: 0;
    }
}

main {
    flex: 1;
}

.banner {
    width: 100%;
    padding: 0.5rem;
    padding-bottom: 0.8rem;
    background-color: var(--banner-background-color);
    
    & time {
        color: var(--h1-font-color);
        display: block;
        text-align: center;
        margin: 0 auto;
        font-size: 1.5rem;
        letter-spacing: -2%;
    }
}

section, article {
    margin-top: 2rem;
    margin-bottom: 2rem;

    & p:first-child {
            margin-top: 0;
        }
    
    & p:last-child {
            margin-bottom: 0;
        }
}

.postlist {
    margin: 0;
    padding: 0;
}

.postlist-item {
    align-items: baseline;
    list-style-type: none;
    margin-bottom: 1.5rem;
    padding-left: 0;

    & h2 {
        margin-bottom: 0;
    }

    & p, p:last-child {
        margin-top: 0;
        margin-bottom: 1rem;
    }
}

.postlist-item:first-child {
    margin-top: 0;
}

.postlist-link {
    text-align: center;
    display: block;
    width: fit-content;
    margin: auto;
    padding-bottom: 0.375rem;
    text-underline-position: from-font;
    text-underline-offset: 0;
}

.postlist-date {
    width: fit-content;
    margin: auto;
    text-align: center;
    font-size: 1rem;
    font-style: italic;
    display: block;
    padding-bottom: 0.625rem;
}

.postlist-divider, .footnotes-sep {
    width: 66%;
    margin: 0 auto;
    border: 0;
    border-bottom: 1pt solid var(--grey);
}

footer {
    min-height: 2rem;
    width: 100%;
    margin: 2rem;

    & small {
        display: block;
        text-align: center;
        line-height: 1.75;
    }
}