/* Article pages: a photographic opening and compact, editorial content rows. */
.sp-article-page { padding: 0 0 var(--sp-section-space); }
.sp-article-hero { background: #faf5f8; border-bottom: 1px solid var(--sp-line); padding: 2rem 0 2.75rem; }
.sp-article-breadcrumb { margin-bottom: 2.25rem; }
.sp-article-hero-grid { display: grid; grid-template-columns: 1.45fr 1fr; grid-template-areas: 'heading intro' 'image image'; align-items: center; gap: 2.5rem 4.5rem; }
.sp-article-hero-heading { grid-area: heading; min-width: 0; }
.sp-article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1rem; margin-bottom: 1.1rem; font-size: .8125rem; color: var(--sp-muted); }
.sp-article-category a { display: inline-block; border: 1px solid #e5bfd3; border-radius: 4px; padding: .3rem .7rem; color: var(--sp-accent); font-weight: 600; background: #fff; }
.sp-article-hero h1 { font: 700 clamp(2.25rem, 4vw, 3.5rem)/1.12 var(--sp-font-heading); letter-spacing: -.05em; margin: 0; text-wrap: balance; overflow-wrap: break-word; }
.sp-article-intro { grid-area: intro; padding-top: 2rem; color: #50424b; font-size: 1.125rem; line-height: 1.8; }
.sp-article-intro p { margin: 0; }
.sp-article-intro a { text-decoration: underline; text-underline-offset: 3px; }
.sp-article-image { grid-area: image; margin: 0; min-width: 0; }
.sp-article-image-frame { overflow: hidden; border-radius: 12px; background: #ece4e9; }
.sp-article-image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; }
.sp-article-image.is-facade img { aspect-ratio: 4.2 / 1; }
.sp-article-image figcaption { font-size: .75rem; color: var(--sp-muted); margin-top: .65rem; }
.sp-article-hero-grid:not(.has-image) { grid-template-areas: 'heading intro'; padding-bottom: 1rem; }
.sp-article-hero-grid:not(.has-intro) { grid-template-columns: 1fr; grid-template-areas: 'heading' 'image'; }
.sp-article-hero-grid:not(.has-intro):not(.has-image) { grid-template-areas: 'heading'; }
.sp-article-hero-grid:not(.has-intro) .sp-article-hero-heading { grid-column: 1 / -1; max-width: 60rem; }
.sp-article-content-wrap { max-width: 1120px; margin-inline: auto; padding-top: 3.75rem; }
.sp-article-body { max-width: none; margin: 0; font-size: 1.0625rem; line-height: 1.85; color: var(--sp-gray-800); }
.sp-article-body > :not(.sp-article-section) { max-width: 740px; margin-inline: auto; }
.sp-article-section { display: grid; grid-template-columns: 1fr 2fr; gap: 3.5rem; padding-block: 2.25rem; border-bottom: 1px solid var(--sp-line); }
.sp-article-section:first-of-type { padding-top: 0; }
.sp-article-section > h2 { margin: 0; font-size: 1.625rem; line-height: 1.3; letter-spacing: -.035em; text-wrap: balance; }
.sp-article-section-number { color: var(--sp-accent); }
.sp-article-section-copy { min-width: 0; }
.sp-article-section-copy > :first-child { margin-top: 0; }
.sp-article-section-copy > :last-child { margin-bottom: 0; }
.sp-article-section-copy p { margin-bottom: 1.25rem; }
.sp-article-section-copy h3 { font-size: 1.25rem; margin-top: 1.75rem; }
.sp-article-body strong { color: var(--sp-ink); font-weight: 600; }
.sp-article-body ul, .sp-article-body ol { padding-left: 1.25rem; margin-bottom: 1.5rem; }
.sp-article-body li { margin-bottom: .5rem; padding-left: .3rem; }
.sp-article-body li::marker { color: var(--sp-accent); }
.sp-article-body .sp-article-feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; padding: 0; list-style: none; }
.sp-article-feature-list li { background: #faf5f8; border-radius: 8px; padding: 1.25rem; margin: 0; font-size: .9375rem; line-height: 1.75; }
.sp-article-feature-list strong { font-size: 1rem; }
.sp-article-afterword { padding-top: 0; }
.sp-article-pagination, .sp-article-tags { margin-top: 1.5rem; font-size: .875rem; }
.sp-article-contact { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 2.5rem; margin-top: 3.5rem; padding: 2.5rem 3rem; border-radius: 12px; border-left: 4px solid var(--sp-accent); }
.sp-article-contact h2 { font-size: clamp(1.65rem, 2.6vw, 2.25rem); margin: 0 0 .85rem; }
.sp-article-contact p:last-child { margin: 0; max-width: 38rem; color: #50424b; font-size: 1rem; }
.sp-article-contact-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; justify-self: end; }
.sp-article-contact-actions .btn { display: inline-flex; justify-content: center; }
.sp-article-service-link { display: inline-block; padding-block: .4rem; color: var(--sp-ink); font-size: .875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.sp-article-related { margin-top: 4.5rem; }
.sp-article-related > h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 1.75rem; }
.sp-article-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.sp-article-related-card { display: flex; flex-direction: column; gap: 1rem; color: var(--sp-ink); padding-bottom: 1.5rem; border-bottom: 1px solid var(--sp-line); }
.sp-article-related-card figure { margin: 0; border-radius: 10px; overflow: hidden; background: #faf5f8; }
.sp-article-related-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.sp-article-related-card .is-facade img { aspect-ratio: 3 / 2; object-position: center top; }
.sp-article-related-card h3 { font-size: 1.25rem; line-height: 1.4; letter-spacing: -.03em; margin: 0; transition: color var(--sp-transition); }
.sp-article-related-card:hover h3 { color: var(--sp-accent); text-decoration: underline; text-underline-offset: 4px; }
.sp-article-comments { max-width: 780px; margin: 3.5rem auto 0; border-top: 1px solid var(--sp-line); padding-top: 1.5rem; }
.sp-article-comments > summary { cursor: pointer; font-weight: 600; padding-block: .5rem; }
.sp-article-comments > summary::marker { color: var(--sp-accent); }
.sp-article-comments .comments-area { margin-top: 1.5rem !important; }
.sp-article-comments h2 { font-size: 1.5rem; }
.sp-article-comments .comment-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.sp-article-comments .comment-form > p { grid-column: 1 / -1; margin: 0; }
.sp-article-comments .comment-form > .comment-form-author, .sp-article-comments .comment-form > .comment-form-email { grid-column: auto; }
.sp-article-comments .comment-notes, .sp-article-comments .logged-in-as { font-size: .8rem; color: var(--sp-muted); }
.sp-article-comments label { display: block; font-size: .85rem; margin-bottom: .4rem; }
.sp-article-comments textarea, .sp-article-comments input:not([type=submit]):not([type=checkbox]):not([type=hidden]) { display: block; width: 100%; min-width: 0; border: 1px solid #d8d4cd; border-radius: 4px; padding: .75rem 1rem; background: #fff; }
.sp-article-comments textarea { min-height: 150px; height: 160px; resize: vertical; }
.sp-article-comments .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: .65rem; }
.sp-article-comments .comment-form-cookies-consent input { flex-shrink: 0; margin-top: .3rem; width: 18px; height: 18px; accent-color: var(--sp-accent); }
.sp-article-comments .comment-form-cookies-consent label { font-size: .8rem; color: var(--sp-muted); }
@media (max-width: 991.98px) {
    .sp-article-hero-grid { gap: 2rem; grid-template-columns: 1fr; grid-template-areas: 'heading' 'image' 'intro'; }
    .sp-article-hero-grid:not(.has-image) { grid-template-areas: 'heading' 'intro'; }
    .sp-article-hero-grid:not(.has-image):not(.has-intro) { grid-template-areas: 'heading'; }
    .sp-article-hero h1 { max-width: 48rem; }
    .sp-article-intro { padding: 0; max-width: 42rem; }
    .sp-article-image img { aspect-ratio: 2 / 1; }
    .sp-article-section { grid-template-columns: 1fr 1.8fr; gap: 2rem; }
    .sp-article-section > h2 { font-size: 1.4rem; }
    .sp-article-body .sp-article-feature-list { grid-template-columns: 1fr; }
    .sp-article-contact { padding: 2rem; }
    .sp-article-related-grid { gap: 1.25rem; }
}
@media (max-width: 767.98px) {
    .sp-article-page { padding-bottom: 3rem; }
    .sp-article-hero { padding: 1.5rem 0 2rem; }
    .sp-article-breadcrumb { margin-bottom: 1.75rem; }
    .sp-article-hero-grid { gap: 1.5rem; }
    .sp-article-hero h1 { font-size: clamp(1.875rem, 6.7vw, 2.75rem); line-height: 1.17; text-wrap: pretty; }
    .sp-article-meta { font-size: .75rem; margin-bottom: 1rem; }
    .sp-article-intro { font-size: 1.0625rem; line-height: 1.8; }
    .sp-article-image.is-facade img { aspect-ratio: 3.6 / 1; }
    .sp-article-content-wrap { padding-top: 2.25rem; }
    .sp-article-section { grid-template-columns: 1fr; gap: .85rem; padding-block: 1.75rem; }
    .sp-article-section > h2 { font-size: 1.5rem; text-wrap: pretty; }
    .sp-article-body { font-size: 1rem; line-height: 1.8; }
    .sp-article-feature-list li { padding: 1.1rem 1.25rem; }
    .sp-article-contact { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem 1.5rem; margin-top: 2.5rem; }
    .sp-article-contact-actions { justify-self: stretch; align-items: stretch; text-align: center; gap: .65rem; }
    .sp-article-related { margin-top: 3rem; }
    .sp-article-related-grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .sp-article-related-card img { aspect-ratio: 2 / 1; }
    .sp-article-related-card h3 { font-size: 1.4rem; }
    .sp-article-related-card .is-facade img { aspect-ratio: 3 / 1; }
    .sp-article-comments .comment-form { grid-template-columns: 1fr; }
}