:root {
    --news-paper: oklch(0.975 0.012 80);
    --news-sheet: oklch(0.955 0.018 82);
    --news-ink: oklch(0.25 0.028 255);
    --news-muted: oklch(0.47 0.018 255);
    --news-green: oklch(0.47 0.105 158);
    --news-gold: oklch(0.82 0.14 87);
    --news-rule: oklch(0.25 0.028 255 / 0.24);
}

body[data-community-module="news"] {
    margin: 0;
    color: var(--news-ink);
    background: var(--news-paper);
}

.news-main {
    width: min(820px, calc(100% - 40px));
    margin: 0 auto;
    padding: clamp(36px, 7vw, 80px) 0 72px;
}

.news-masthead {
    position: relative;
    margin: 0 10px 54px 0;
    padding: clamp(30px, 6vw, 58px);
    border: 1px solid var(--news-ink);
    border-left: 9px solid var(--news-green);
    border-radius: 4px;
    background: var(--news-sheet);
    box-shadow: 10px 10px 0 var(--news-gold);
}

.news-kicker,
.news-meta,
.news-source {
    color: var(--news-muted);
    font-size: 0.78rem;
    line-height: 1.55;
}

.news-kicker {
    margin-bottom: 12px;
    color: var(--news-green);
    font-weight: 750;
}

.news-masthead h1 {
    margin: 0 0 14px;
    font-family: var(--rc-serif);
    font-size: clamp(2.2rem, 7vw, 4.9rem);
    line-height: 1.08;
    letter-spacing: 0;
}

.news-deck {
    max-width: 38rem;
    margin: 0 0 20px;
    color: var(--news-muted);
    font-size: 1rem;
    line-height: 1.8;
}

.news-status {
    display: flex;
    gap: 8px 18px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--news-rule);
    color: var(--news-muted);
    font-size: 0.78rem;
}

.news-section {
    margin-top: 44px;
}

.news-section-title {
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--news-ink);
    font-family: var(--rc-serif);
    font-size: clamp(1.55rem, 4vw, 2.25rem);
    letter-spacing: 0;
}

.news-list {
    display: grid;
    gap: 0;
}

.news-item {
    position: relative;
    padding: 26px 0 28px;
    border-bottom: 1px solid var(--news-rule);
}

.news-item--lead {
    margin: 0 8px 24px 0;
    padding: 30px 28px 32px;
    border: 1px solid var(--news-ink);
    border-left: 8px solid var(--news-green);
    border-radius: 4px;
    background: var(--news-sheet);
    box-shadow: 8px 8px 0 var(--news-gold);
}

.news-item h2 {
    max-width: 38rem;
    margin: 7px 0 10px;
    font-family: var(--rc-serif);
    font-size: clamp(1.25rem, 3vw, 1.65rem);
    line-height: 1.42;
    letter-spacing: 0;
}

.news-item h2 a {
    color: var(--news-ink);
    text-decoration: none;
}

.news-item h2 a:hover {
    color: var(--news-green);
}

.news-summary {
    margin: 0;
    color: var(--news-ink);
    font-size: 0.96rem;
    line-height: 1.85;
}

.news-why {
    margin: 13px 0 0;
    padding-left: 13px;
    border-left: 3px solid var(--news-gold);
    color: var(--news-muted);
    font-size: 0.88rem;
    line-height: 1.75;
}

.news-action {
    display: inline-flex;
    margin-top: 14px;
    padding: 7px 10px;
    border: 1px solid color-mix(in oklch, var(--news-green) 45%, transparent);
    border-radius: 3px;
    color: var(--news-green);
    background: color-mix(in oklch, var(--news-green) 9%, var(--news-paper));
    font-size: 0.78rem;
    font-weight: 650;
}

.news-tags {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.news-tag {
    padding: 4px 8px;
    border: 1px solid color-mix(in oklch, var(--news-green) 38%, transparent);
    border-radius: 3px;
    color: oklch(0.34 0.09 158);
    background: oklch(0.92 0.035 158);
    font-size: 0.72rem;
}

.news-editor-note,
.news-subscribe {
    margin: 46px 8px 0 0;
    padding: 24px 26px;
    border: 1px solid var(--news-ink);
    border-radius: 4px;
    background: var(--news-sheet);
}

.news-editor-note h2,
.news-subscribe h2 {
    margin: 0 0 9px;
    font-family: var(--rc-serif);
    font-size: 1.18rem;
    letter-spacing: 0;
}

.news-editor-note p,
.news-subscribe p {
    margin: 0;
    color: var(--news-muted);
    font-size: 0.86rem;
    line-height: 1.75;
}

.news-subscribe {
    box-shadow: 7px 7px 0 oklch(0.88 0.045 158);
    text-align: center;
}

.news-button {
    display: inline-flex;
    margin-top: 16px;
    padding: 10px 16px;
    border: 1px solid var(--news-ink);
    border-radius: 4px;
    color: white;
    background: var(--news-green);
    box-shadow: 3px 3px 0 var(--news-gold);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
}

.news-archive-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--news-ink);
}

.news-archive-list li {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid var(--news-rule);
    align-items: baseline;
}

.news-archive-list a {
    color: var(--news-ink);
    font-family: var(--rc-serif);
    font-weight: 650;
    text-decoration: none;
}

.news-empty {
    padding: 36px 0;
    color: var(--news-muted);
}

@media (max-width: 640px) {
    .news-main {
        width: min(100% - 28px, 820px);
        padding-top: 28px;
    }

    .news-masthead {
        margin-right: 6px;
        padding: 28px 22px;
        box-shadow: 6px 6px 0 var(--news-gold);
    }

    .news-item--lead {
        margin-right: 5px;
        padding: 24px 20px 26px;
        box-shadow: 5px 5px 0 var(--news-gold);
    }

    .news-archive-list li {
        grid-template-columns: 1fr auto;
        gap: 6px 12px;
    }

    .news-archive-list time {
        grid-column: 1 / -1;
    }
}