/* A product overview, using the site's shared margins and typefaces. */
.project-detail { padding-top: var(--section-space); }
.project-back { font-size: 14px; text-decoration: none; }
.project-back:hover { text-decoration: underline; }
.project-intro { padding-top: 32px; }
.project-kicker { color: var(--text-secondary); font-size: 14px; margin-bottom: 16px; }
.project-intro h1 { margin-bottom: 20px; }
.project-tagline { font-family: var(--font-display); font-size: 30px; line-height: 1.3; margin-bottom: 20px; }
.project-summary { max-width: 760px; font-size: 18px; line-height: 1.85; margin-bottom: 24px; }
.project-scene { margin: 40px 0; }
.project-scene img { display: block; width: 100%; height: auto; }
.project-scene figcaption { color: var(--text-secondary); font-size: 14px; line-height: 1.7; margin-top: 12px; }
.project-credits { border-top: 1px solid var(--border); padding-top: 24px; font-size: 14px; line-height: 1.85; }
.project-credits p { color: var(--text-secondary); margin-bottom: 12px; }
nav a[aria-current="location"] { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--accent-line); }
.project-skip { position: absolute; left: 22px; top: -100px; padding: 8px 12px; background: var(--background-primary); z-index: 1; }
.project-skip:focus { top: 12px; }
@media (max-width: 540px) {
    .project-intro { padding-top: 24px; }
    .project-tagline { font-size: 26px; }
    .project-summary { font-size: 17px; }
    .project-scene { margin-block: 28px; }
}