/*
 * ICC Society — tenant-owned corporate editorial presentation.
 * Loaded after the shared SPN stylesheets. Palette remains supplied by
 * the tenant's existing --spn-* variables in includes/icc-layout.php.
 */

:root {
    --icc-serif: Georgia, Charter, "Times New Roman", Times, serif;
    --icc-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif;
    --icc-rule: rgba(53, 71, 74, 0.22);
    --icc-muted: rgba(44, 42, 39, 0.72);
}

body {
    font-family: var(--icc-sans);
    background: var(--spn-bg);
    color: var(--spn-text);
    line-height: 1.72;
}

h1,
h2,
h3,
.spn-logo,
.spn-card-title,
.spn-news-title {
    font-family: var(--icc-serif);
    letter-spacing: -0.012em;
}

a {
    text-underline-offset: 0.18em;
}

.spn-header {
    border-bottom: 3px solid var(--spn-accent);
    box-shadow: none;
}

.spn-header-inner {
    min-height: 4.75rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    gap: 2.5rem;
}

.spn-logo {
    font-size: clamp(1.3rem, 2.2vw, 1.65rem);
    font-weight: 700;
    letter-spacing: -0.018em;
}

.spn-nav ul {
    gap: 0.25rem 2rem;
}

.spn-nav ul li a {
    display: inline-block;
    padding: 0.55rem 0;
    border-bottom: 1px solid transparent;
    font-size: 0.875rem;
    font-weight: 650;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.spn-nav ul li a:hover,
.spn-nav ul li a:focus-visible {
    border-bottom-color: var(--spn-accent);
}

.spn-nav-hamburger,
.spn-nav-hamburger span {
    border-radius: 0;
}

.spn-hero-banner {
    position: relative;
    height: clamp(13rem, 27vw, 20rem);
    border-bottom: 1px solid var(--icc-rule);
}

.spn-hero-banner::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(53, 71, 74, 0.58) 0%, rgba(53, 71, 74, 0.16) 56%, rgba(53, 71, 74, 0.38) 100%),
        linear-gradient(0deg, rgba(53, 71, 74, 0.32), transparent 55%);
    content: "";
    pointer-events: none;
}

.spn-hero-banner img {
    object-position: center 58%;
    filter: saturate(0.72) contrast(1.04);
}

#spn-main {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.spn-hero {
    margin: 2.75rem 0 1rem;
    padding: clamp(2.5rem, 6vw, 4.75rem) clamp(1.5rem, 5vw, 4rem);
    border-left: 5px solid var(--spn-accent);
    text-align: left;
}

.spn-hero h1 {
    max-width: 18ch;
    margin: 0 0 1rem;
    font-size: clamp(2.25rem, 5vw, 4.2rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.032em;
}

.spn-hero p {
    max-width: 58ch;
    margin: 0;
    font-size: clamp(1rem, 1.7vw, 1.18rem);
    line-height: 1.65;
    opacity: 0.9;
}

.spn-topic-cards,
.spn-latest-articles,
.spn-site-desc {
    padding-top: clamp(2.75rem, 6vw, 4.75rem);
    padding-bottom: clamp(2.75rem, 6vw, 4.75rem);
}

.spn-topic-cards h2,
.spn-latest-articles h2,
.spn-faq h2,
.spn-related-articles h2 {
    margin-bottom: 1.75rem;
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.022em;
}

.spn-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
}

.spn-card,
.spn-article-card,
.spn-news-card {
    border: 1px solid var(--icc-rule);
    border-top: 4px solid var(--spn-accent);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.spn-card {
    padding: 1.75rem 1.5rem 1.6rem;
}

.spn-card:hover,
.spn-article-card:hover,
.spn-news-card:hover {
    box-shadow: 0 0.85rem 2rem rgba(53, 71, 74, 0.08);
}

.spn-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.spn-card-summary {
    color: var(--icc-muted);
    font-size: 0.94rem;
    line-height: 1.68;
}

.spn-card-cta {
    margin-top: 1rem;
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.spn-card-tag,
.spn-article-tag,
.spn-per-page-bar a,
.spn-pagination a,
.spn-pagination span,
.spn-directory-services li,
.spn-directory-filters,
.spn-directory-filters select,
.spn-directory-filters input,
.spn-directory-filters button,
.spn-directory-submit-btn,
.spn-directory-form input,
.spn-directory-form select,
.spn-directory-add-row,
.spn-adsense-placeholder,
.spn-ops-note {
    border-radius: 0;
}

.spn-latest-articles {
    margin-right: -1.5rem;
    margin-left: -1.5rem;
    border-top: 1px solid var(--icc-rule);
    border-bottom: 1px solid var(--icc-rule);
}

.spn-latest-list {
    gap: 0;
    border-top: 1px solid var(--icc-rule);
}

.spn-latest-list li {
    border-bottom: 1px solid var(--icc-rule);
}

.spn-latest-list li a {
    display: block;
    padding: 1rem 0;
    font-family: var(--icc-serif);
    font-size: 1.08rem;
    line-height: 1.45;
}

.spn-site-desc {
    max-width: 72ch;
    padding-right: 0;
    padding-left: 0;
    color: var(--icc-muted);
    line-height: 1.8;
}

.spn-article-list {
    max-width: 70rem;
    padding-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.spn-article-list h1 {
    max-width: 18ch;
    margin-bottom: 0.8rem;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.032em;
}

.spn-list-meta {
    margin-bottom: 2rem;
    color: var(--icc-muted);
    font-size: 0.9rem;
}

.spn-article-list ul {
    gap: 1.5rem;
}

.spn-article-card {
    padding: 1.55rem 1.5rem 1.4rem;
}

.spn-article-card h2 {
    margin-bottom: 0.75rem;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.018em;
}

.spn-article-card .spn-card-date {
    color: var(--icc-muted);
    font-size: 0.8rem;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.spn-article-detail {
    max-width: 70ch;
    padding-top: clamp(3rem, 7vw, 5.5rem);
    padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

.spn-article-detail .spn-article-header {
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--icc-rule);
}

.spn-article-detail .spn-article-header h1 {
    font-size: clamp(2.35rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.034em;
}

.spn-article-detail .spn-article-body,
.spn-article-detail .spn-article-body-2 {
    max-width: 70ch;
    font-size: 1.075rem;
    line-height: 1.78;
}

.spn-article-detail .spn-article-body h2,
.spn-article-detail .spn-article-body-2 h2 {
    margin-top: 2.8rem;
    margin-bottom: 0.85rem;
    font-size: clamp(1.55rem, 2.7vw, 2.05rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.022em;
}

.spn-article-detail .spn-article-body h3,
.spn-article-detail .spn-article-body-2 h3 {
    margin-top: 2rem;
    font-size: 1.2rem;
    line-height: 1.35;
}

.spn-article-detail blockquote {
    margin: 2rem 0;
    padding: 1rem 0 1rem 1.5rem;
    border-left: 4px solid var(--spn-accent);
    font-family: var(--icc-serif);
    font-size: 1.18rem;
    line-height: 1.6;
}

.spn-policy,
.spn-guide-section,
.spn-sitemap-section {
    max-width: 70ch;
}

.spn-policy h1,
.spn-guide-section h1,
.spn-sitemap-section h1,
.spn-category-page h1,
.spn-news-feed h1 {
    font-size: clamp(2.15rem, 4.5vw, 3.4rem);
    font-weight: 700;
    line-height: 1.08;
}

.spn-footer {
    margin-top: 4.5rem;
    border-top: 4px solid var(--spn-accent);
}

.spn-footer-grid {
    gap: 3rem;
    padding-top: 0.75rem;
    padding-bottom: 3rem;
}

.spn-footer-col h3 {
    font-family: var(--icc-sans);
    letter-spacing: 0.09em;
}

@media (max-width: 820px) {
    .spn-card-grid {
        grid-template-columns: 1fr;
    }

    .spn-header-inner {
        min-height: auto;
        gap: 1rem;
    }

    .spn-nav {
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    .spn-nav ul {
        gap: 0;
        padding-top: 0.6rem;
    }

    .spn-nav ul li a {
        display: block;
        padding: 0.7rem 0;
    }
}

@media (max-width: 767px) {
    #spn-main {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .spn-hero-banner {
        height: 10.5rem;
    }

    .spn-hero-banner img {
        object-position: 57% 58%;
    }

    .spn-hero {
        margin-top: 1.5rem;
        padding: 2.25rem 1.25rem;
        border-left-width: 4px;
    }

    .spn-hero h1,
    .spn-article-list h1,
    .spn-article-detail .spn-article-header h1 {
        font-size: clamp(2rem, 10vw, 2.75rem);
        line-height: 1.08;
    }

    .spn-topic-cards,
    .spn-latest-articles,
    .spn-site-desc {
        padding-top: 2.75rem;
        padding-bottom: 2.75rem;
    }

    .spn-latest-articles {
        margin-right: -1rem;
        margin-left: -1rem;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .spn-article-list,
    .spn-article-detail {
        padding: 2.75rem 0;
    }

    .spn-article-list ul {
        grid-template-columns: 1fr;
    }

    .spn-article-detail .spn-article-body,
    .spn-article-detail .spn-article-body-2 {
        font-size: 1.025rem;
        line-height: 1.72;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}