/* --------------------------------------------------
   Design-page theme variables
-------------------------------------------------- */

:root {
    --design-background: var(--page-background);
    --design-text: var(--page-text);
    --design-heading: var(--heading-color);
    --design-link: var(--link-color);
    --design-muted: var(--muted-text);
    --design-subtle: var(--subtle-text);
    --design-accent: var(--hover-color);

    --surface-hover: #151515;
    --visual-background: #141414;

    --line: #242424;
    --line-bright: #3a3a3a;

    --accent-soft: rgba(169, 134, 134, 0.14);

    --grid-line: rgba(255, 255, 255, 0.018);
    --glow-one: rgba(169, 134, 134, 0.09);
    --glow-two: rgba(90, 118, 132, 0.07);

    --card-background: rgba(16, 16, 16, 0.92);
    --filter-background: rgba(9, 9, 9, 0.76);

    --card-arrow: rgba(255, 255, 255, 0.72);

    --modal-backdrop: rgba(0, 0, 0, 0.84);
    --modal-panel: #0d0d0d;
    --modal-media: #111111;
    --modal-shadow: rgba(0, 0, 0, 0.6);

    --page-width: 1180px;
}

html[data-theme="light"] {
    --surface-hover: #f3f1f1;
    --visual-background: #eeeeec;

    --line: #ddddda;
    --line-bright: #aaa7a7;

    --accent-soft: rgba(121, 92, 92, 0.11);

    --grid-line: rgba(0, 0, 0, 0.025);
    --glow-one: rgba(121, 92, 92, 0.07);
    --glow-two: rgba(65, 103, 121, 0.055);

    --card-background: rgba(255, 255, 255, 0.93);
    --filter-background: rgba(255, 255, 255, 0.78);

    --card-arrow: rgba(0, 0, 0, 0.7);

    --modal-backdrop: rgba(20, 20, 20, 0.74);
    --modal-panel: #ffffff;
    --modal-media: #eeeeec;
    --modal-shadow: rgba(0, 0, 0, 0.22);
}


/* --------------------------------------------------
   Global layout
-------------------------------------------------- */

body {
    margin: 0;

    min-height: 100vh;
    min-height: 100dvh;

    padding:
        54px
        24px
        80px;

    overflow-x: hidden;

    background:
        linear-gradient(
            var(--grid-line) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--grid-line) 1px,
            transparent 1px
        ),
        var(--design-background);

    background-size:
        42px 42px;

    font-family:
        var(--font-mono);

    line-height: 1.6;
}

body::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 16% 8%,
            var(--glow-one),
            transparent 27rem
        ),
        radial-gradient(
            circle at 85% 70%,
            var(--glow-two),
            transparent 30rem
        );
}

button,
input {
    font: inherit;
}

button {
    padding: 0;
}

.container {
    width:
        min(
            100%,
            var(--page-width)
        );

    margin:
        0 auto;
}


/* --------------------------------------------------
   Header
-------------------------------------------------- */

header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 32px;
    align-items: end;

    margin-bottom: 52px;
    padding-bottom: 34px;

    border-bottom:
        1px solid
        var(--line);
}

.eyebrow {
    margin:
        0 0 10px;

    color:
        var(--design-accent);

    font-size: 0.76rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

h1 {
    margin: 0;

    color:
        var(--design-heading);

    font-size:
        clamp(
            2rem,
            5vw,
            4.4rem
        );

    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.intro {
    max-width: 690px;

    margin:
        22px 0 0;

    color:
        var(--design-muted);

    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.72;
}

.header-index {
    min-width: 150px;

    color:
        var(--design-subtle);

    font-size: 0.76rem;
    letter-spacing: 0.12em;
    line-height: 1.9;
    text-align: right;
    text-transform: uppercase;
}

.header-index strong {
    color:
        var(--design-muted);

    font-weight: 400;
}


/* --------------------------------------------------
   Filters and toolbar
-------------------------------------------------- */

.toolbar {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 24px;
}

.filters {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.filter-button {
    padding:
        8px 12px;

    border:
        1px solid
        var(--line);

    border-radius: 0;

    background:
        var(--filter-background);

    color:
        var(--design-muted);

    cursor: pointer;

    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    transition:
        color 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease;
}

.filter-button:hover,
.filter-button:focus-visible,
.filter-button[aria-pressed="true"] {
    border-color:
        var(--line-bright);

    background:
        var(--accent-soft);

    color:
        var(--design-heading);
}

.filter-button[aria-pressed="true"] {
    border-color:
        var(--design-accent);
}

.filter-button:focus-visible {
    outline:
        1px solid
        var(--design-accent);

    outline-offset: 3px;
}

.project-count {
    color:
        var(--design-subtle);

    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* --------------------------------------------------
   Project grid
-------------------------------------------------- */

.project-grid {
    display: grid;

    grid-template-columns:
        repeat(
            12,
            minmax(0, 1fr)
        );

    gap: 16px;
}

.project-card {
    position: relative;

    grid-column:
        span 4;

    min-width: 0;

    padding: 0;

    overflow: hidden;

    border:
        1px solid
        var(--line);

    border-radius: 0;

    background:
        var(--card-background);

    color:
        inherit;

    cursor: pointer;
    text-align: left;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}

.project-card--half {
    grid-column:
        span 6;
}

.project-card--wide {
    grid-column:
        span 8;
}

.project-card--full {
    grid-column:
        span 12;
}

.project-card:hover,
.project-card:focus-visible {
    transform:
        translateY(-4px);

    border-color:
        var(--line-bright);

    background:
        var(--surface-hover);

    outline: none;
}

.project-card:focus-visible {
    box-shadow:
        0 0 0 1px
        var(--design-accent);
}

.project-card::after {
    content: "↗";

    position: absolute;

    top: 14px;
    right: 15px;

    z-index: 2;

    color:
        var(--card-arrow);

    font-size: 0.9rem;

    opacity: 0;

    transform:
        translate(
            -4px,
            4px
        );

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.project-card:hover::after,
.project-card:focus-visible::after {
    opacity: 1;

    transform:
        translate(0, 0);
}


/* --------------------------------------------------
   Project imagery
-------------------------------------------------- */

.project-visual {
    position: relative;

    aspect-ratio:
        16 / 10;

    overflow: hidden;

    background:
        var(--visual-background);
}

.project-card--wide:not(.project-card--portrait)
.project-visual {
    aspect-ratio:
        16 / 8;
}

.project-card--full:not(.project-card--portrait)
.project-visual {
    aspect-ratio:
        16 / 7;
}

.project-visual img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(0.86)
        contrast(1.02);

    transition:
        transform 500ms
            cubic-bezier(.2, .7, .2, 1),
        filter 180ms ease;
}


/* Portrait projects */

.project-visual--portrait {
    display: grid;

    place-items: center;

    aspect-ratio:
        4 / 5;

    padding: 12px;
}

.project-visual--portrait img {
    object-fit: contain;
}

.project-card:hover
.project-visual img,
.project-card:focus-visible
.project-visual img {
    transform:
        scale(1.025);

    filter:
        saturate(1)
        contrast(1.04);
}


/* PDF preview */

.pdf-preview {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    background:
        #ffffff;

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, 0.32);
}


/* Generated fallback artwork */

.project-fallback {
    position: relative;

    display: grid;

    place-items: center;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            135deg,
            var(--fallback-a),
            var(--fallback-b)
        );
}

.project-fallback::before,
.project-fallback::after {
    content: "";

    position: absolute;

    border:
        1px solid
        rgba(255, 255, 255, 0.16);
}

.project-fallback::before {
    width: 43%;

    aspect-ratio: 1;

    transform:
        rotate(45deg);
}

.project-fallback::after {
    width: 72%;
    height: 1px;

    border-width:
        1px 0 0;

    transform:
        rotate(-14deg);
}

.project-fallback span {
    z-index: 1;

    color:
        rgba(255, 255, 255, 0.76);

    font-size:
        clamp(
            1.2rem,
            4vw,
            3.5rem
        );

    letter-spacing: -0.08em;
}


/* --------------------------------------------------
   Project information
-------------------------------------------------- */

.project-info {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 20px;
    align-items: start;

    padding:
        17px 18px 19px;
}

.project-title {
    margin: 0;

    color:
        var(--design-heading);

    font-size: 0.94rem;
    font-weight: 400;
    letter-spacing: -0.015em;
}

.project-type {
    margin:
        6px 0 0;

    color:
        var(--design-muted);

    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.project-year {
    color:
        var(--design-subtle);

    font-size: 0.76rem;
}

.empty-state {
    grid-column:
        1 / -1;

    padding:
        70px 24px;

    border:
        1px solid
        var(--line);

    color:
        var(--design-muted);

    text-align: center;
}


/* --------------------------------------------------
   Project modal
-------------------------------------------------- */

.modal {
    position: fixed;
    inset: 0;

    z-index: 10;

    display: none;

    place-items: center;

    padding: 24px;

    background:
        var(--modal-backdrop);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}

.modal.is-open {
    display: grid;
}

.modal-panel {
    width:
        min(
            100%,
            980px
        );

    max-height:
        calc(
            100vh - 48px
        );

    max-height:
        calc(
            100dvh - 48px
        );

    overflow: auto;

    border:
        1px solid
        var(--line-bright);

    background:
        var(--modal-panel);

    color:
        var(--design-text);

    box-shadow:
        0 30px 100px
        var(--modal-shadow);
}

.modal-media {
    min-height: 280px;

    background:
        var(--modal-media);
}

.modal-media img {
    display: block;

    width: 100%;
    max-height: 66vh;
    max-height: 66dvh;

    object-fit: contain;

    background:
        var(--modal-media);
}

.modal-copy {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(220px, 0.36fr);

    gap: 40px;

    padding:
        27px 30px 32px;
}

.modal-copy h2 {
    margin:
        0 0 12px;

    color:
        var(--design-heading);

    font-size:
        clamp(
            1.35rem,
            3vw,
            2.2rem
        );

    font-weight: 400;
    letter-spacing: -0.04em;
}

.modal-description {
    margin: 0;

    color:
        var(--design-muted);

    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.65;
}

.modal-meta {
    margin: 0;

    color:
        var(--design-muted);

    font-size: 0.78rem;
    line-height: 2;
    text-transform: uppercase;
}

.modal-meta strong {
    color:
        var(--design-text);

    font-weight: 400;
}

.modal-link {
    display: inline-block;

    margin-top: 12px;

    color:
        var(--design-link);

    text-decoration: none;

    border-bottom:
        1px solid
        var(--line-bright);
}

.modal-link:hover,
.modal-link:focus-visible {
    color:
        var(--design-heading);

    border-color:
        var(--design-heading);
}

.modal-close {
    position: fixed;

    top:
        max(
            24px,
            env(safe-area-inset-top)
        );

    right:
        max(
            27px,
            env(safe-area-inset-right)
        );

    width: 42px;
    height: 42px;

    border:
        1px solid
        var(--line-bright);

    background:
        var(--modal-panel);

    color:
        var(--design-muted);

    cursor: pointer;

    font-size: 1.2rem;
}

.modal-close:hover,
.modal-close:focus-visible {
    color:
        var(--design-heading);

    border-color:
        var(--design-muted);
}

.modal-close:focus-visible {
    outline:
        1px solid
        var(--design-heading);

    outline-offset: 3px;
}


/* --------------------------------------------------
   Responsive layout
-------------------------------------------------- */

@media (max-width: 850px) {
    body {
        padding-inline: 17px;
    }

    header {
        grid-template-columns: 1fr;
    }

    .header-index {
        display: none;
    }

    .project-card--standard,
    .project-card--half {
        grid-column:
            span 6;
    }

    .project-card--wide,
    .project-card--full {
        grid-column:
            span 12;
    }

    .project-card--wide:not(.project-card--portrait)
    .project-visual,
    .project-card--full:not(.project-card--portrait)
    .project-visual {
        aspect-ratio:
            16 / 10;
    }

    .modal-copy {
        grid-template-columns: 1fr;

        gap: 22px;
    }
}

@media (max-width: 570px) {
    body {
        padding-top: 32px;
    }

    header {
        margin-bottom: 34px;
    }

    .toolbar {
        align-items: flex-start;
    }

    .project-card {
        grid-column:
            1 / -1;
    }

    .project-info {
        padding-inline: 14px;
    }

    .modal {
        padding: 0;
    }

    .modal-panel {
        max-height: 100vh;
        max-height: 100dvh;

        border-inline: 0;
    }

    .modal-copy {
        padding:
            22px 18px 30px;
    }

    .modal-close {
        top:
            max(
                12px,
                env(safe-area-inset-top)
            );

        right:
            max(
                12px,
                env(safe-area-inset-right)
            );
    }
}