/* ============================================================================
   Project detail page.
   ========================================================================== */

.project__notice { margin-bottom: var(--s-7); }

.project__layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--s-9);
    align-items: start;
}

.project__description {
    margin-top: var(--s-6);
    font-size: var(--fs-md);
    color: var(--text-muted);
}

.project__subheading {
    margin-top: var(--s-8);
    font-size: var(--fs-lg);
}

.project__scope {
    display: grid;
    gap: var(--s-4);
    margin-top: var(--s-5);
}
.project__scope li {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--s-4);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--border);
}
.project__scope li:last-child { border-bottom: 0; padding-bottom: 0; }

.project__check {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    color: var(--c-white);
    background: var(--c-gold);
    border-radius: 50%;
}

/* ---------------------------------------------------------------- facts */
.project__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
}

.project__facts {
    padding: var(--s-6);
    background: var(--ink-900);
    color: var(--c-white);
    border-radius: var(--radius);
}

.project__facts-title {
    padding-bottom: var(--s-4);
    margin-bottom: var(--s-2);
    font-size: var(--fs-xs);
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--c-gold);
    border-bottom: 1px solid var(--border-dark);
}

.project__meta-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: var(--s-4);
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--border-dark);
}
.project__meta-row dt { font-size: var(--fs-sm); color: var(--ink-400); }
.project__meta-row dd {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-align: right;
    color: var(--c-white);
}

.project__facts-cta { margin-top: var(--s-6); }

@media (max-width: 1023px) {
    .project__layout { grid-template-columns: 1fr; gap: var(--s-8); }
    .project__aside  { position: static; }
}

/* ---------------------------------------------------------------- gallery */
.project__gallery { margin-top: var(--s-9); }

/* ---------------------------------------------------------------- prev/next */
.project__nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--s-5);
    padding: var(--s-6) 0;
    border-block: 1px solid var(--border);
}

.project__nav-link {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    color: var(--text);
    transition: color var(--dur) var(--ease);
}
.project__nav-link:hover { color: var(--c-gold); }
.project__nav-link .icon { color: var(--c-gold); flex: none; }
.project__nav-link--next { justify-content: flex-end; text-align: right; }

.project__nav-label {
    display: block;
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

.project__nav-title {
    display: block;
    margin-top: 2px;
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 700;
}

.project__nav-all {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color var(--dur) var(--ease);
}
.project__nav-all:hover { color: var(--c-gold); }

@media (max-width: 767px) {
    .project__nav { grid-template-columns: 1fr; gap: var(--s-5); text-align: left; }
    .project__nav-link--next { justify-content: flex-start; text-align: left; flex-direction: row-reverse; }
    .project__nav-all { order: 3; }
}

/* ---------------------------------------------------------------- related */
.project__related { margin-top: var(--s-9); }

@media (max-width: 767px) {
    .project__nav-link { min-height: 48px; }
    .project__nav-all {
        display: inline-block;
        align-self: flex-start;
        padding-block: var(--s-3);
    }
}