*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Layout */
    --contentWidth: 1100px;
    --headerPadding: max(7px, calc((100vw - var(--contentWidth)) / 2));
    --contentPadding: max(15px, calc(((100vw - var(--contentWidth)) / 2) + 20px));
    /* Colors */
    --color-text: #042c53;
    --color-text-muted: #85b7eb;
    --color-text-muted-alt: #85a3c5;
    --color-text-soft: #4a6b91;
    --color-text-soft-alt: #b5d4f4;
    --color-text-terminal: rgb(200 235 220 / 90%);
    --color-text-terminal-white: #f0eee7; /* same as below, but without transparency */
    --color-text-terminal-muted: rgba(240, 238, 231, 0.82);
    --color-text-terminal-muted-alt: rgba(240, 238, 231, 0.9);
    --color-text-terminal-soft: rgba(240, 238, 231, 0.6);
    --color-text-terminal-red: #ffb6a0;
    --color-link: #185fa5;
    --color-accent-dark: #0c447c;
    --color-accent: #378add;
    --color-bg: #e6f1fb;
    --color-bg-light: #f0f5fb;
    --color-bg-lighter: #f7fafd;
    --color-bg-white: #ffffff;
    --color-bg-pop: #e1ecf8;
    --color-bg-warm: #eef3f9;
    --color-bg-dark: linear-gradient(180deg, #101a2e 0%, #0a1322 100%);
    --color-border: #b5d4f4;
    --color-border-rule: #c9dcef;
    --color-header-bg: #3b4c66;
    --color-header-text: #e6e8ea;
    /* Borders */
    --border-solid: 1.5px solid var(--color-border);
    --border-dashed: 1.5px dashed var(--color-border);
    --border-rule: 1px solid var(--color-border-rule);
    --border-terminal-solid: 1px solid rgba(240, 238, 231, .14);
    --border-terminal-rule: 1px dashed rgba(240, 238, 231, .12);
    /* Border radius */
    --radius-card: 14px;
    --radius-small: 10px;
    --radius-smaller: 5px;
    --radius-pill: 20px;
    /* Fonts */
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-heading: Lora, Georgia, serif;
    --font-mono: ui-monospace, 'SF Mono', Cascadia, Menlo, monospace;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    color: var(--color-text);
    background-color: var(--color-bg);
    font-family: var(--font-body);

    & > header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
        background-color: var(--color-header-bg);
        width: 100%;
        padding: 7px var(--headerPadding) 28px;
        /*
            Original path
            clip-path: shape( from 0% 0%, line to 100% 0%, line to 100% calc(100% - 28px), curve to 50% calc(100% - 22px) with 75% 100%, curve to 0% calc(100% - 20px) with 25% calc(100% - 44px), close);

            More shallow path used:
        */
        clip-path: shape( from 0% 0%, line to 100% 0%, line to 100% calc(100% - 16px), curve to 50% calc(100% - 12px) with 75% 100%, curve to 0% calc(100% - 10px) with 25% calc(100% - 24px), close );

        & > div {
            font-size: 1.5rem;
            color: var(--color-header-text);
            margin-right: auto;
        }

        & > nav {
            margin-left: auto;

            & a {
                font-size: 1rem;
                color: var(--color-text-muted);
                text-decoration: none;
                padding: 0.3rem 0.75rem;
                border-radius: var(--radius-pill);
                transition: color .15s, background .15s;

                &:hover {
                    color: var(--color-bg);
                    background: rgba(255, 255, 255, .10);
                    text-decoration: none;
                }

                &.current {
                    color: var(--color-bg);
                    background: rgba(255, 255, 255, .20);
                }
            }
        }
    }
}

main {
    background-color: var(--color-bg-lighter);
    flex: 1;

    & > header {
        color: var(--color-text);
        background-color: var(--color-bg);
        border-bottom: var(--border-dashed);
        padding: 0.75rem var(--contentPadding) 1.25rem;

        & nav {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            margin-bottom: 0.75rem;

            & a {
                font-size: 0.75rem;
                color: var(--color-accent-dark);
            }
        }

        & > div {
            display: flex;
            align-items: center;
            gap: 1.4rem;

            & > img {
                border: 3px solid var(--color-accent);
                border-radius: 60px;
                box-shadow: 0 0 0 5px var(--color-bg), 0 0 0 6.5px var(--color-border);
            }

            & > div {

                & .tagline {
                    font-size: 0.75rem;
                    line-height: 1.5;
                    margin-bottom: 0.5rem;
                }

                & .blurb {
                    font-size: 1rem;

                    & ul,
                    & ol {
                        margin: 0;

                        & li {
                            list-style-type: none;
                            display: inline-block;
                            line-height: 1.6;
                            font-size: 0.8rem;
                            border-bottom: none;
                            padding: 0;

                            &:before {
                                display: none;
                            }

                            &:not(:last-child)::after {
                                display: inline-block;
                                margin-inline: 0.3rem 0.2rem;
                                content: '\2022';
                            }
                        }
                    }
                }

                & #date-stamp {
                    font-size: 0.7rem;
                    margin-top: 0.4rem;
                }
            }
        }
    }

    & > section {
        padding: 1rem var(--contentPadding) 1.25rem;
    }
}

footer {
    background-color: var(--color-bg);
    border-top: var(--border-dashed);
    padding-inline: var(--contentPadding);

    & .footer-wrapper {
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 0;
        font-size: 0.75rem;
        color: var(--color-text-muted-alt);

        & nav.footer-nav {
            display: flex;
            gap: 1rem;

            a {
                color: var(--color-text-muted-alt);
                background: transparent;
                border-radius: var(--radius-pill);
                padding: 0.1rem 0.5rem;
                transition: background 0.2s ease, color 0.2s ease;

                &.current {
                    color: var(--color-bg-light);
                    background: var(--color-text-muted-alt);
                }

                &:hover {
                    color: var(--color-bg-light);
                    background: var(--color-text-soft);
                    text-decoration: none;
                }
            }
        }

        & nav.social-media {
            display: flex;
            gap: 0.5rem;

            & a {
                display: block;
                width: 20px;
                height: 20px;
                background-color: var(--color-text-muted-alt);
                mask-repeat: no-repeat;
                mask-position: center;
                mask-size: cover;

                &:hover {
                    background-color: var(--color-text-soft);
                }
            }
        }
    }
}

h1, h2, h3, h4, h5, h6, .heading {
    font-family: var(--font-heading);
    font-style: italic;
}

h2, h3, h4, h5, h6 {
    margin-top: 1rem;
    margin-bottom: 0.3rem;
}

h1 {
    font-size: 1.75rem;
    line-height: 1.25;
    margin-bottom: .3rem;
}

h2 {
    font-size: 1.25rem;
}

h3 {
    font-size: 1rem;
}


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

    &:hover {
        text-decoration: underline;
    }
}

aside {

    &:not(:last-child) {
        margin-bottom: 1.5rem;
    }

    & nav {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        font-size: 0.8rem;

        a {
            display: inline-flex;
            align-items: baseline;
            gap: 0.25rem;
            padding: 0.25rem 0.6rem;
            color: var(--color-accent-dark);
            background: transparent;
            border-radius: var(--radius-smaller);
            transition: background 0.15s ease;

            &:hover {
                text-decoration: none;
                background: var(--color-bg-pop);
            }

            span {
                font-size: 0.75rem;
                color: var(--color-text-muted-alt);
            }

            &[data-selected] {
                background: var(--color-header-bg);
                color: var(--color-header-text);
            }
        }
    }

    & h3 {
        margin-top: 0;
        border-bottom: 1px solid var(--color-border);
        padding-bottom: 0.75rem;
        margin-bottom: 0.75rem;
    }

    & form[role=search] {
        border: var(--border-rule);
        border-radius: var(--radius-smaller);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 0.5rem;
        transition: background 0.15s ease, border-color 0.15s ease;

        &:focus-within {
            background: var(--color-bg-white);
            border-color: var(--color-accent);
        }

        button {
            flex-shrink: 0;
            background: none;
            outline: none;
            border: none;
            color: var(--color-text-soft);
            width: 14px;
            height: 14px;
            padding: 0;
            cursor: pointer;
        }

        input {
            flex: 1;
            border: none;
            outline: none;
            background: none;
            color: var(--color-text);
            font-size: 0.9rem;
            padding: 0.15rem 0;
        }
    }
}

ul, ol {
    list-style-position: inside;
    margin: 1rem 0 0;
    counter-reset: lictr;
}

ul, ol {

    li {
        display: grid;
        grid-template-columns: 30px 1fr;
        list-style-type: none;
        counter-increment: lictr;
        border-bottom: var(--border-rule);
        padding: 0.65rem 0;

        &:last-child {
            border-bottom: none;
        }

        &::before {
            content: counter(lictr, decimal-leading-zero);
            grid-column: 1;
            color: var(--color-text-muted);
            font-size: 0.8rem;
            padding-top: 0.20rem;
        }

        & > * {
            grid-column: 2;
        }

        & > :first-child {
            margin-top: 0;
        }

        & > :last-child {
            margin-bottom: 0;
        }
    }
}

    ul li::before {
        content: '\2022';
        text-align: center;
    }


.grid {
    display: grid;
    grid-template-columns: repeat(attr(data-cols type(<integer>)), 1fr);
    gap: 0.85rem;

    & > * {
        grid-column: span attr(data-col-span type(<integer>));
    }

    &:has(.block) {
        gap: 1.5rem;
    }

    & + .grid {
        margin-top: 1.5rem;
    }
}

.block {
    display: flex;
    flex-direction: column;
    flex: 1;

    h2 {
        font-size: 1.05rem;
        margin: 0;
    }

    & > a {
        color: var(--color-text);

        &:hover {
            text-decoration: none;
        }
    }

    .body {
        flex-grow: 1;
    }

    .blurb {
        font-size: 0.9rem;
    }

    .date-stamp {
        font-size: 0.75rem;
        font-style: italic;
        color: var(--color-text-muted-alt);
    }

    &[data-label]::before {
        content: attr(data-label);
        font-family: var(--font-heading);
        font-style: italic;
        font-size: 1.05rem;
        color: var(--color-text);
        display: block;
        border-bottom: var(--border-rule);
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .meta {
        margin-top: auto;
        padding-top: 0.5rem;
        display: flex;
        align-items: baseline;
    }

    .project {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;

        &:not(:last-child) {
            margin-bottom: 1rem;
        }

        .body {

            .blurb {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .links {
                margin-top: 0.5rem;

                a {
                    font-size: 0.6rem;
                }
            }
        }
    }

    .featured-image {
        height: 150px;
        width: 100%;
        overflow: hidden;
        border-radius: var(--radius-smaller);
        margin-bottom: 0.5rem;

        img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }
    }

    .older-blog-posts {
        font-size: 0.8rem;
        display: flex;
        align-items: center;

        a:not(.pill) {
            font-family: var(--font-heading);
            font-style: italic;
            color: var(--color-text);
        }

        & > div:not(:first-child) {
            margin-left: 1rem;
            padding-left: 1rem;
            border-left: var(--border-rule);
        }

        & > div:last-child {
            margin: 0;
            padding: 0;
            border: none;
            flex-grow: 1;
            text-align: right;
        }

        & > a {
            display: block;
        }
    }
}

.photo-album-list section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;

    & > a,
    & > div {
        text-decoration: none;
        color: inherit;
        transition: border-color .15s;

        &:hover {
            img {
                opacity: 0.8;
                transform: scale(1.05);
            }
        }

        & h2 {
            margin-top: 0;
            margin-bottom: 0.2rem;
        }

        &.ghost {
            opacity: 0.4;
        }

        div:has(img),
        div.noimg {
            width: 100%;
            height: 150px;
            border-radius: var(--radius-smaller);
            overflow: hidden;
            margin-bottom: 0.5rem;
            background: var(--color-bg-pop);

            img {
                width: 100%;
                height: 150px;
                object-fit: cover;
                transition: transform 0.15s ease, opacity 0.15s ease;
            }
        }

        div.noimg {
            border: var(--border-dashed);
        }

        div:not(:has(img)) {

            & > p {
                color: var(--color-link);
                margin-bottom: 0.2rem;
                font-size: 0.8rem;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}

/* Shared base for photo cards */
.photo-card,
.photo-asset-card {
    display: flex;
    border-radius: var(--radius-smaller);
    overflow: hidden;
    text-decoration: none;
}

.photo-card {
    grid-column: span 4;
    align-items: flex-end;
    aspect-ratio: 1;

    &:hover {

        img {
            opacity: 0.8;
            transform: scale(1.05);
        }
    }

    & img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.15s ease, opacity 0.15s ease;
    }
}

.photo-asset-card {
    align-items: center;
    justify-content: center;

    & > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        touch-action: pan-y;
    }
}

.pill {
    display: inline-block;
    border-radius: var(--radius-pill);
    color: var(--color-accent-dark);
    background-color: var(--color-bg);
    padding: 0.2rem 0.7rem;
    line-height: 1.6;
    font-size: 0.8rem;
    transition: background-color 0.15s;
    cursor: pointer;

    &:hover {
        text-decoration: none;
        background-color: var(--color-border);
    }
}

nav.next-previous {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.25rem;
}

[data-disabled] {
    opacity: 0.4;
    cursor: not-allowed;

    &:hover {
        text-decoration: none;
    }
}

.blog-list {
    gap: 1.75rem;

    & section {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;

        & a {
            display: flex;
            text-decoration: none;
            padding-bottom: 0.75rem;
            position: relative;

            &:has(.img) {
                padding-right: 140px; /* 130px image width + 10px gap; reserves space for the absolutely-positioned .img */
            }

            &:not(:last-child) {
                border-bottom: var(--border-dashed);
            }

            &::before {
                content: '';
                position: relative;
                width: 2px;
                background: var(--color-border);
                transform-origin: top;
                transform: scaleY(0);
                transition: transform 0.25s ease;
            }

            &:nth-child(1)::before {
                background: var(--color-accent-dark);
            }

            &:nth-child(2)::before {
                background: var(--color-link);
            }

            &:hover {

                &::before {
                    transform: scaleY(1);
                }

                & .body {
                    left: 0;
                }
            }

            & .body {
                flex: 1;
                padding: 0 10px;
                min-width: 0;
                position: relative;
                left: -10px;
                transition: left 0.25s ease;

                & .date-stamp {
                    font-size: 0.75rem;
                    margin-bottom: 0.3rem;
                }

                & h2 {
                    margin-top: 0;
                    margin-bottom: 0.4rem;
                }

                & .blurb {
                    margin-bottom: 0.5rem;
                }
            }

            & .img {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0.75rem; /* match the <a>'s padding-bottom so the image aligns with .body */
                width: 130px;
                overflow: hidden;
                border-radius: var(--radius-small);
                max-height: 250px;

                img {
                    display: block;
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                }
            }
        }
    }
}

.blog article figure,
.blog article p:has(img),
.blog .featured-image {
    display: inline-block;
    border: var(--border-solid);
    border-radius: 8px;
    overflow: hidden;
    margin: 0;
}

    .blog article figure p:has(img) {
        display: contents;
    }

    .blog article img,
    .blog .featured-image img {
        display: block;
    }

.blog article figcaption {
    width: 0;
    min-width: 100%;
    border-top: var(--border-solid);
    padding: .5em;
    box-sizing: border-box;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: 0.8rem;
}

.blog article a:has(img) {
    display: block;
    text-decoration: none;
    color: inherit;
}

.blog .featured-image {
    float: right;
    margin-left: 1.25rem;
    margin-bottom: 2px;
}

.blog article p:has(> a:only-child > img:only-child),
.blog article p:has(> img:only-child),
.blog article figure {
    margin: 1rem 0;
}

.blog {

    & > div {
        display: flow-root;
    }

    & section.gallery {
        width: 100%;
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: var(--border-dashed);

        & a {
            display: inline-block;
            border-radius: 8px;
            overflow: hidden;
            border: var(--border-solid);
            transition: opacity .15s;

            &:hover {
                opacity: 0.85;
            }

            & img {
                display: block;
            }
        }
    }
}

pre {
    padding: 1rem 1.2rem;
    margin: 1rem 0;

    &.terminal {
        background: var(--color-bg-dark);
        color: var(--color-text-terminal);
        font-family: var(--font-mono);
    }

    & > code {
        background: transparent;
        border: none;
    }
}

code {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    display: inline-block;
    border: var(--border-rule);
    border-radius: var(--radius-smaller);
    background: var(--color-bg-warm);
    padding: 1px 0.25rem;
    white-space: pre-wrap;
}

blockquote {
    border-left: solid 3px var(--color-border);
    padding-left: 1rem;
    margin: 1rem 0;

    & .cite {
        color: var(--color-text-soft);
        text-transform: uppercase;
        font-size: 0.7rem;
        letter-spacing: 0.18em;
        margin-top: 0.5rem;
    }
}

table {
    border-collapse: collapse;
    margin: 1rem 0;

    tr {
        border-bottom: var(--border-dashed);

        &:has(th) {
            border-bottom: var(--border-solid);
        }

        th, td {
            padding: 1rem 1.3rem;
            vertical-align: top;

            &:first-child {
                padding-left: 0;
            }

            &:last-child {
                padding-right: 0;
            }
        }

        th {
            font-weight: bold;
            text-align: left;
        }

        td {
        }
    }
}

.cv {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    & > details {
        border: var(--border-rule);
        border-radius: var(--radius-small);
        background: transparent;
        padding: 1.5rem;
        overflow: hidden;

        & > summary {
            list-style: none;
            cursor: pointer;
            color: var(--color-text);
            font-family: var(--font-heading);
            font-style: italic;
            font-size: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            & > div:last-child {
                font-style: normal;
                transition: transform 0.2s ease;
                flex-shrink: 0;
            }
        }

        &[open] {
            background: var(--color-bg-warm);

            > summary {
                border-bottom: 1px solid var(--color-text);
                padding-bottom: 1rem;
                margin-bottom: 1rem;

                & > div:last-child {
                    font-style: normal;
                    transform: rotate(90deg);
                }
            }
        }

        & .content {

            & .timeline {
                margin-bottom: 1rem;
                padding-bottom: 1rem;
                border-bottom: var(--border-dashed);
                color: var(--color-link);

                &:last-child {
                    margin-bottom: 0;
                    padding-bottom: 0;
                    border-bottom: none;
                }

                & .title {
                    display: flex;
                    justify-content: space-between;
                    align-items: baseline;
                    font-family: var(--font-heading);
                    font-size: 0.9rem;
                    color: var(--color-text);

                    & div:last-child {
                        flex-shrink: 0;
                        font-size: 0.8rem;
                        color: var(--color-link);
                    }
                }

                & .tagline,
                & .blurb {
                    font-size: 0.8rem;
                }

                & .blurb {
                    margin-top: 0.35rem;
                }
            }

            & .other {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
                font-size: 0.9rem;

                & > .title {
                    display: flex;
                    align-items: center;
                    gap: 0.65rem;
                    font-family: var(--font-heading);
                    font-style: italic;
                    color: var(--color-text);
                    font-size: 1.1rem;
                }

                & > .blurb {
                    flex: 1;
                }

                & > .links {
                    margin-top: 0.25rem;
                }
            }
            /* Inner details/summary */
            & > details {

                & > summary {
                    list-style: none;
                    cursor: pointer;
                    display: inline-flex;
                    align-items: center;
                    color: var(--color-link);
                    text-transform: uppercase;
                    letter-spacing: 0.13rem;
                    font-weight: 500;
                    font-size: 0.8rem;

                    &:hover {

                        & > div {
                            text-decoration: underline;
                        }

                            & > div:last-child {
                                text-decoration: none;
                            }
                    }

                    & > div:last-child {
                        font-size: .55rem;
                        margin-left: 0.3rem;
                        transition: transform .2s ease;
                        flex-shrink: 0;
                    }
                }

                & > .content {
                    margin-top: 1rem;
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;

                    & > .timeline {
                        border-bottom: var(--border-dashed);
                        padding-bottom: 0.5rem;
                        margin-bottom: 0;

                        &:last-child {
                            border-bottom: none;
                            padding-bottom: 0;
                        }
                    }
                }

                &[open] > summary > div:last-child {
                    transform: rotate(90deg);
                }
            }
        }
    }
}

.status-box {

    > div {
        background: var(--color-bg-dark);
        color: var(--color-text-terminal-white);
        padding: 0.25rem 1.2rem 0.4rem;
        border: var(--border-rule);
        border-radius: var(--radius-smaller);
        font-family: var(--font-mono);
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        color: var(--color-text-terminal-muted-alt);
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.22em;
        border-bottom: var(--border-terminal-solid);
        padding: 0.65rem 0 0.5rem;

        div:last-child {
            color: var(--color-text-terminal-soft);
            display: flex;

            span {
                margin: 0;
                display: block;
            }

            & span + span::before {
                content: '\2022';
                margin: 0 0.3rem;
            }
        }
    }

    .block-list > div {
        display: grid;
        grid-template-columns: 18px 1fr auto;
        gap: 1rem;
        align-items: center;
        color: var(--color-text-terminal-muted);
        border-bottom: var(--border-terminal-rule);
        padding: 0.68rem 0;
        text-transform: uppercase;
        font-size: 0.76rem;
        letter-spacing: 0.14em;

        &:last-child {
            border-bottom: none;
        }

        span:first-child {
            width: 11px;
            height: 11px;
            border-radius: 50%;
        }

        span:last-child {
            color: var(--color-text-terminal-white);
            text-transform: none;
            font-size: 0.85rem;
            font-weight: 500;
            letter-spacing: 0.04em;
        }

        &.red {
            span:first-child {
                background: #d85a3c;
                box-shadow: 0 0 10px rgba(216, 90, 60, .75), inset 0 -2px 2px rgba(0, 0, 0, .25);
            }

            span:last-child {
                color: var(--color-text-terminal-red);
            }
        }

        &.amber span:first-child {
            background: #d9a72c;
            box-shadow: 0 0 8px rgba(217, 167, 44, .55), inset 0 -2px 2px rgba(0, 0, 0, .2);
        }

        &.green span:first-child {
            background: #6aae5e;
            box-shadow: 0 0 6px rgba(106, 174, 94, .45), inset 0 -2px 2px rgba(0, 0, 0, .2);
        }
    }
}

hr {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border: none;
    border-bottom: var(--border-dashed);
}
/* Browser overrides */
/* clears the 'X' from Internet Explorer */
input[type=search]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* clears the 'X' from Chromium */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

#disqus_thread {
    border-top: var(--border-dashed);
    padding-top: 1rem;
}

/* Fonts */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/css/fonts/DMSans.ttf) format('truetype');
}

@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(/css/fonts/DMSansItalic.ttf) format('truetype');
}

@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/css/fonts/Lora.ttf) format('truetype');
}

@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(/css/fonts/LoraItalic.ttf) format('truetype');
}
/* Alternate layouts */
@media (max-width: 768px) {

    .grid {
        grid-template-columns: repeat(2, 1fr);

        & > * {
            grid-column: span 2;
        }

        & .photo-card {
            grid-column: span 1;
        }
    }
}

@media (max-width: 680px) {

    body > header {
        clip-path: shape( from 0% 0%, line to 100% 0%, line to 100% calc(100% - 12px), curve to 50% calc(100% - 8px) with 75% 100%, curve to 0% calc(100% - 6px) with 25% calc(100% - 18px), close );
    }
}