/* =============================================================================
   Project Detail — a dossier page for the wider catalog.
   Lighter sibling of the project landing: same hairline vocabulary and lp-
   badge/button components, single reading column, left-anchored header.
   ============================================================================= */
.project-detail {
    --lp-accent: var(--accent-warm);
    padding-top: var(--spacing-md);
}

.pd-head {
    padding-bottom: clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.pd-title {
    margin: 0;
    font-family: var(--font-family-display);
    font-size: clamp(2.1rem, 1.7rem + 2vw, 3.1rem);
    font-weight: 300;
    letter-spacing: var(--tracking-tight);
    line-height: 1.1;
    color: var(--text-primary);
}

.pd-lede {
    margin: 1.1rem 0 0;
    max-width: 46ch;
    font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.2rem);
    line-height: 1.55;
    color: var(--text-secondary);
    letter-spacing: var(--tracking-snug);
    text-wrap: pretty;
}

.pd-body {
    padding-bottom: var(--spacing-xxl);
}

.pd-foot {
    padding: var(--spacing-lg) 0 var(--spacing-xxl);
    border-top: 1px solid var(--border-color);
}

.pd-foot a {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-x-small);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.18s ease;
}

.pd-foot a:hover {
    color: var(--accent-warm);
}