/* ============================================================
   STC TRANSITION LETTER — Archive & Single Issue Styles
   Strong Through Change | strongthroughchange.com
   ============================================================ */

/* ── Variables ── */
:root {
    --stc-dark:     #1a1a2e;
    --stc-accent:   #c9a84c;
    --stc-light:    #f7f4ef;
    --stc-text:     #2d2d2d;
    --stc-muted:    #6b6b6b;
    --stc-border:   #e0dbd2;
    --stc-card-bg:  #ffffff;
    --stc-radius:   8px;
    --stc-shadow:   0 2px 12px rgba(0,0,0,0.07);
    --stc-font:     'Georgia', 'Times New Roman', serif;
    --stc-sans:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Archive Wrapper ── */
.stc-archive-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px 80px;
    font-family: var(--stc-sans);
}

/* ── Filter Bar ── */
.stc-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    border-bottom: 2px solid var(--stc-border);
    padding-bottom: 20px;
}

.stc-filter-btn {
    display: inline-block;
    padding: 7px 18px;
    border: 1.5px solid var(--stc-border);
    border-radius: 30px;
    font-size: 13px;
    font-family: var(--stc-sans);
    color: var(--stc-muted);
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: all 0.2s ease;
}

.stc-filter-btn:hover,
.stc-filter-btn.active {
    background: var(--stc-dark);
    border-color: var(--stc-dark);
    color: #fff;
}

/* ── Issue Grid ── */
.stc-issue-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 50px;
}

@media (max-width: 900px) {
    .stc-issue-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
    .stc-issue-grid { grid-template-columns: 1fr; }
}

/* ── Issue Card ── */
.stc-issue-card {
    background: var(--stc-card-bg);
    border: 1px solid var(--stc-border);
    border-radius: var(--stc-radius);
    padding: 26px 24px 22px;
    box-shadow: var(--stc-shadow);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.stc-issue-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.13);
    transform: translateY(-2px);
}

.stc-arc-badge {
    font-size: 11px;
    font-family: var(--stc-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--stc-accent);
    font-weight: 600;
    line-height: 1.3;
}

.stc-issue-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--stc-muted);
}

.stc-issue-num {
    font-weight: 700;
    color: var(--stc-dark);
}

.stc-issue-title {
    font-family: var(--stc-font);
    font-size: 18px;
    font-weight: normal;
    line-height: 1.4;
    margin: 4px 0 0;
}

.stc-issue-title a {
    color: var(--stc-dark);
    text-decoration: none;
}

.stc-issue-title a:hover {
    color: var(--stc-accent);
}

.stc-pull-quote {
    font-family: var(--stc-font);
    font-style: italic;
    font-size: 14px;
    color: var(--stc-muted);
    line-height: 1.6;
    border-left: 3px solid var(--stc-accent);
    padding-left: 12px;
    margin: 4px 0;
}

.stc-pillar-tag {
    display: inline-block;
    font-size: 11px;
    font-family: var(--stc-sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    background: var(--stc-light);
    border-radius: 3px;
    color: var(--stc-dark);
    font-weight: 600;
    margin-top: 4px;
    width: fit-content;
}

.stc-read-link {
    font-size: 13px;
    font-family: var(--stc-sans);
    font-weight: 600;
    color: var(--stc-accent);
    text-decoration: none;
    margin-top: auto;
    padding-top: 10px;
}

.stc-read-link:hover {
    color: var(--stc-dark);
}

/* ── Pagination ── */
.stc-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 60px;
}

.stc-pagination .page-numbers {
    padding: 8px 14px;
    border: 1.5px solid var(--stc-border);
    border-radius: 4px;
    color: var(--stc-text);
    text-decoration: none;
    font-size: 14px;
}

.stc-pagination .page-numbers.current,
.stc-pagination .page-numbers:hover {
    background: var(--stc-dark);
    color: #fff;
    border-color: var(--stc-dark);
}

/* ── Archive CTA Banner ── */
.stc-archive-cta {
    text-align: center;
    background: var(--stc-light);
    border: 1px solid var(--stc-border);
    border-radius: var(--stc-radius);
    padding: 40px 30px;
}

.stc-archive-cta p {
    font-family: var(--stc-font);
    font-size: 18px;
    color: var(--stc-dark);
    margin-bottom: 20px;
}

.stc-cta-btn {
    display: inline-block;
    background: var(--stc-dark);
    color: #fff;
    padding: 14px 32px;
    border-radius: 4px;
    font-size: 15px;
    font-family: var(--stc-sans);
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: background 0.2s ease;
}

.stc-cta-btn:hover {
    background: var(--stc-accent);
    color: var(--stc-dark);
}

.stc-no-issues {
    text-align: center;
    color: var(--stc-muted);
    font-family: var(--stc-font);
    font-size: 17px;
    padding: 60px 20px;
}

/* ============================================================
   SINGLE ISSUE STYLES
   ============================================================ */

.stc-single-wrap {
    max-width: 680px;
    margin: 0 auto;
    padding: 50px 20px 100px;
    font-family: var(--stc-font);
    color: var(--stc-text);
}

/* Issue header */
.stc-single-header {
    border-bottom: 2px solid var(--stc-dark);
    padding-bottom: 24px;
    margin-bottom: 36px;
}

.stc-single-kicker {
    font-size: 11px;
    font-family: var(--stc-sans);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--stc-accent);
    font-weight: 700;
    margin-bottom: 10px;
}

.stc-single-title {
    font-family: var(--stc-font);
    font-size: 34px;
    font-weight: normal;
    line-height: 1.25;
    color: var(--stc-dark);
    margin: 0 0 16px;
}

.stc-single-meta {
    font-family: var(--stc-sans);
    font-size: 13px;
    color: var(--stc-muted);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.stc-single-meta .stc-pillar-tag {
    margin: 0;
}

/* Body content */
.stc-single-body {
    font-size: 18px;
    line-height: 1.8;
    color: var(--stc-text);
}

.stc-single-body p {
    margin-bottom: 1.4em;
}

.stc-single-body h2,
.stc-single-body h3 {
    font-family: var(--stc-sans);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--stc-accent);
    font-weight: 700;
    margin: 48px 0 16px;
    border-top: 2px solid var(--stc-border);
    padding-top: 20px;
}

/* Section dividers styled like the email */
.stc-section-divider {
    border: none;
    border-top: 1px solid var(--stc-border);
    margin: 36px 0;
}

/* Try This box */
.stc-try-this {
    background: var(--stc-light);
    border-left: 4px solid var(--stc-accent);
    padding: 20px 24px;
    border-radius: 0 var(--stc-radius) var(--stc-radius) 0;
    margin: 32px 0;
    font-size: 16px;
    line-height: 1.7;
}

.stc-try-this strong {
    display: block;
    font-family: var(--stc-sans);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--stc-accent);
    margin-bottom: 8px;
}

/* Next Sunday teaser */
.stc-next-sunday {
    background: var(--stc-dark);
    color: #e8e4db;
    padding: 24px 28px;
    border-radius: var(--stc-radius);
    margin: 40px 0;
    font-size: 16px;
    line-height: 1.7;
}

.stc-next-sunday strong {
    display: block;
    font-family: var(--stc-sans);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--stc-accent);
    margin-bottom: 8px;
}

/* ── Prev/Next navigation ── */
.stc-issue-nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-top: 60px;
    padding-top: 30px;
    border-top: 2px solid var(--stc-border);
    font-family: var(--stc-sans);
    font-size: 14px;
}

.stc-issue-nav a {
    color: var(--stc-dark);
    text-decoration: none;
    max-width: 45%;
}

.stc-issue-nav a:hover { color: var(--stc-accent); }

.stc-issue-nav .stc-nav-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--stc-muted);
    margin-bottom: 4px;
}

.stc-issue-nav .stc-nav-next { text-align: right; }

/* ── Sticky subscribe sidebar (desktop only) ── */
.stc-single-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 50px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 100px;
    align-items: start;
}

@media (max-width: 860px) {
    .stc-single-layout {
        grid-template-columns: 1fr;
    }
    .stc-single-sidebar {
        display: none;
    }
}

.stc-single-sidebar {
    position: sticky;
    top: 80px;
}

.stc-sidebar-cta {
    background: var(--stc-light);
    border: 1px solid var(--stc-border);
    border-radius: var(--stc-radius);
    padding: 24px 20px;
    font-family: var(--stc-sans);
}

.stc-sidebar-cta h4 {
    font-family: var(--stc-font);
    font-size: 18px;
    font-weight: normal;
    color: var(--stc-dark);
    margin: 0 0 10px;
    line-height: 1.4;
}

.stc-sidebar-cta p {
    font-size: 13px;
    color: var(--stc-muted);
    line-height: 1.6;
    margin-bottom: 16px;
}

.stc-sidebar-cta .stc-cta-btn {
    display: block;
    text-align: center;
    font-size: 14px;
    padding: 12px 20px;
}

/* Share buttons */
.stc-share-bar {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--stc-border);
}

.stc-share-bar p {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--stc-muted);
    margin-bottom: 10px;
}

.stc-share-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.stc-share-link {
    font-size: 12px;
    padding: 6px 12px;
    border: 1px solid var(--stc-border);
    border-radius: 4px;
    color: var(--stc-dark);
    text-decoration: none;
    font-family: var(--stc-sans);
    transition: all 0.2s;
}

.stc-share-link:hover {
    background: var(--stc-dark);
    color: #fff;
    border-color: var(--stc-dark);
}