.es-hero {
    max-width: var(--max);
    margin: 0 auto;
    padding: 60px var(--gutter) 80px;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 80px;
    align-items: end;
    border-bottom: var(--hairline)
}

.es-hero .smm-eyebrow {
    margin-bottom: 32px
}

.es-hero h1 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: var(--t-display);
    line-height: 1.04;
    letter-spacing: -.01em;
    color: var(--ink)
}

.es-hero h1 em {
    font-style: italic;
    color: var(--accent);
    font-weight: 500
}

.es-hero .lede {
    margin-top: 36px;
    font-size: var(--t-body-lg);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 560px
}

.es-hero aside {
    border-left: var(--hairline);
    padding: 48px 0 16px 48px
}

.es-hero aside .kicker {
    font-size: var(--t-eyebrow);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 24px
}

.es-hero aside p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 22px;
    line-height: 1.5;
    color: var(--ink-soft);
    font-weight: 400
}

.es-list {
    max-width: var(--max);
    margin: 0 auto;
    padding: var(--space-2xl) var(--gutter)
}

.es-list .smm-section-head {
    margin-bottom: 48px
}

.es-list .smm-section-head h2 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: var(--t-h2);
    line-height: 1.08;
    letter-spacing: -.005em;
    color: var(--ink);
    max-width: 780px
}

.es-list .smm-section-head h2 em {
    font-style: italic;
    color: var(--accent-soft)
}

.es-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: var(--hairline-ink)
}

.essay-card {
    padding: 40px 32px 44px;
    border-right: var(--hairline);
    border-bottom: var(--hairline);
    display: flex;
    flex-direction: column
}

.essay-card:first-child {
    padding-left: 0
}

.essay-card:nth-child(3n+1) {
    padding-left: 0
}

.essay-card:nth-child(3n) {
    padding-right: 0;
    border-right: none
}

.essay-card:nth-last-child(-n+3) {
    border-bottom: none
}

.essay-card .meta {
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 16px
}

.essay-card .meta .num {
    color: var(--ink);
    font-style: italic;
    font-family: var(--font-serif);
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: none;
    margin-right: 12px;
    font-weight: 500
}

.essay-card .meta .tag-new {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 8px;
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: .18em;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 2px;
    text-transform: uppercase;
    font-weight: 500
}

.essay-card h3 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.18;
    color: var(--ink);
    margin-bottom: 18px;
    text-wrap: balance
}

.essay-card h3 em {
    font-style: italic;
    color: var(--accent)
}

.essay-card .lede {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink);
    margin-bottom: 24px;
    flex: 1;
    text-wrap: pretty
}

.essay-card .read {
    margin-top: auto
}

.essay-card .read a {
    font-family: var(--font-sans);
    font-size: 14px;
    letter-spacing: .04em;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 2px;
    display: inline-block
}

.essay-card .read a:hover {
    color: var(--accent);
    border-color: var(--accent)
}

@media(max-width:1100px) {
    .es-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .essay-card {
        padding: 40px 32px 44px;
        border-right: var(--hairline);
        border-bottom: var(--hairline)
    }

    .essay-card:first-child {
        padding-left: 0
    }

    .essay-card:nth-child(3n+1) {
        padding-left: 32px
    }

    .essay-card:nth-child(3n) {
        padding-right: 32px;
        border-right: var(--hairline)
    }

    .essay-card:nth-child(odd) {
        padding-left: 0
    }

    .essay-card:nth-child(2n) {
        padding-right: 0;
        border-right: none
    }

    .essay-card:nth-last-child(-n+3) {
        border-bottom: var(--hairline)
    }

    .essay-card:nth-last-child(-n+2) {
        border-bottom: none
    }
}

@media(max-width:720px) {
    .es-hero {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 40px var(--gutter-md) 80px
    }

    .es-hero aside {
        border-left: none;
        border-top: var(--hairline);
        padding: 40px 0 0
    }

    .es-list {
        padding: 80px var(--gutter-md)
    }

    .es-grid {
        grid-template-columns: 1fr
    }

    .essay-card {
        border-right: none;
        padding: 36px 0
    }

    .essay-card:first-child {
        padding-left: 0
    }

    .essay-card:nth-child(3n+1),
    .essay-card:nth-child(3n),
    .essay-card:nth-child(odd),
    .essay-card:nth-child(2n) {
        padding-left: 0;
        padding-right: 0;
        border-right: none
    }

    .essay-card:not(:last-child) {
        border-bottom: var(--hairline)
    }

    .essay-card:last-child {
        border-bottom: none
    }
}