/* Projects page additions to the shared homepage design. */
.site-header a[aria-current="page"] {
    color:var(--purple);
    text-decoration:underline;
    text-underline-offset:6px;
}

.projects-heading {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:80px;
    align-items:end;
    padding-block:76px 56px;
    border-bottom:1px solid var(--line);
}

.projects-heading h1 {
    font-size:clamp(56px,7vw,100px);
    font-weight:500;
    line-height:1.08;
    letter-spacing:-.065em;
    margin-top:24px;
}

.projects-intro {
    font-size:15px;
    line-height:1.9;
    color:var(--muted);
    max-width:540px;
}

.project-collection {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    padding-block:40px 80px;
}

.project-entry {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:36px;
    border:1px solid var(--line);
    border-radius:3px;
    background:#eeede7;
}

/* Repeat the palette if more projects are added. */
.project-entry:nth-child(6n + 1) {
    background:var(--lavender);
    border-color:var(--lavender);
}

.project-entry:nth-child(6n + 2) {
    background:var(--yellow);
    border-color:var(--yellow);
}

.project-entry:nth-child(6n + 3) {
    background:#e2ecdf;
    border-color:#e2ecdf;
}

.project-entry:nth-child(6n + 4) {
    background:#dfeaf3;
    border-color:#dfeaf3;
}

.project-entry:nth-child(6n + 5) {
    background:#f3e2d5;
    border-color:#f3e2d5;
}

.project-entry:nth-child(6n + 6) {
    background:#efdee6;
    border-color:#efdee6;
}

.project-date {
    font-family:'Source Code Pro',monospace;
    font-size:11px;
    line-height:1.7;
    letter-spacing:.03em;
    margin-bottom:24px;
}

.project-entry h2 {
    font-size:clamp(26px,2.6vw,36px);
    line-height:1.25;
    letter-spacing:-.04em;
    margin-bottom:20px;
}

.project-description {
    font-size:14px;
    line-height:1.95;
    color:#55534f;
    margin-bottom:30px;
}

.project-destination {
    display:flex;
    align-items:baseline;
    gap:12px;
    margin-top:auto;
}

.project-destination > span {
    font-family:'Source Code Pro',monospace;
    font-size:11px;
    color:var(--muted);
}

@media(max-width:1100px) {
    .projects-heading {
        gap:40px;
    }
    .project-entry {
        padding:28px;
    }
}

@media(max-width:760px) {
    .projects-heading {
        grid-template-columns:1fr;
        gap:24px;
        padding-block:44px 32px;
    }
    .projects-heading h1 {
        font-size:clamp(52px,12vw,76px);
        margin-top:20px;
    }
    .projects-heading .eyebrow {
        font-size:10px;
    }
    .projects-intro {
        font-size:14px;
        max-width:100%;
    }
    .project-collection {
        grid-template-columns:1fr;
        gap:16px;
        padding-block:28px 48px;
    }
    .project-entry {
        padding:25px;
    }
    .project-entry h2 {
        font-size:28px;
    }
    .project-date {
        font-size:10px;
        margin-bottom:20px;
    }
}

.smaller-projects {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
    gap:48px;
    padding-block:36px 56px;
    border-top:1px solid var(--line);
}

.smaller-projects h2 {
    font-size:28px;
    margin-top:16px;
}

.smaller-projects-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 28px;
    list-style:none;
    padding:0;
    margin:0;
}

.smaller-projects-list li {
    padding:14px 0 14px 16px;
    border-bottom:1px solid var(--line);
    position:relative;
    font-size:13px;
    line-height:1.7;
}

.smaller-projects-list li::before {
    content:'';
    position:absolute;
    left:0;
    top:23px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--purple);
}

@media(max-width:760px) {
    .smaller-projects {
        grid-template-columns:1fr;
        gap:24px;
        padding-block:28px 40px;
    }
}

@media(max-width:420px) {
    .smaller-projects-list {
        grid-template-columns:1fr;
    }
}