.detail-page { min-height: 70vh; padding: 58px 0 110px; background: var(--paper); }
.detail-page .back-link { display: inline-flex; margin-bottom: 28px; color: var(--forest); font-size: 13px; font-weight: 800; }
.detail-content { width: 100%; max-width: 1120px; margin: 0 auto; padding: 42px 64px 56px; border-top: 4px solid var(--forest); background: var(--white); box-shadow: 0 12px 35px rgba(16, 58, 45, .07); }
.detail-kicker { margin: 0 0 14px; color: var(--coral); font: 11px var(--mono); letter-spacing: .08em; }
.detail-content h1 { margin: 0 0 20px; color: var(--forest-deep); font-size: clamp(30px, 4vw, 48px); line-height: 1.2; font-weight: 800; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line); color: var(--muted); font: 11px var(--mono); }
.detail-image { display: block; width: 100%; max-height: 620px; margin: 28px 0; background: var(--sage); object-fit: contain; object-position: center; }
.detail-body { color: #4f6259; font-size: 16px; line-height: 1.95; white-space: pre-wrap; }
.detail-steps { display: grid; gap: 28px; margin-top: 42px; padding-top: 30px; border-top: 1px solid var(--line); }
.detail-steps h2 { margin: 0; color: var(--forest-deep); font-size: 24px; line-height: 1.35; }
.detail-step { width: 100%; margin: 0; }
.detail-step img { display: block; width: 100%; max-height: 760px; object-fit: contain; object-position: left center; background: var(--sage); }
.detail-step figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.75; white-space: pre-wrap; }
.detail-external { display: inline-flex; margin-top: 28px; padding: 11px 15px; background: var(--forest); color: var(--white); font-size: 12px; font-weight: 800; }
.detail-external:hover { background: var(--forest-deep); }
.detail-loading, .detail-empty { color: var(--muted); }
@media (max-width: 900px) { .detail-content { padding-inline: 40px; } }
@media (max-width: 600px) { .detail-page { padding: 38px 0 72px; } .detail-content { margin: 0; padding: 28px 22px 34px; } .detail-content h1 { font-size: 28px; } .detail-body { font-size: 15px; line-height: 1.85; } .detail-image { max-height: 420px; margin-block: 22px; } .detail-steps { gap: 22px; margin-top: 32px; padding-top: 24px; } .detail-steps h2 { font-size: 21px; } .detail-step img { max-height: 520px; } }
.detail-content h1 { font-weight: var(--portal-heading-weight, 800); }