/* ============================================================
   Home Page
   ============================================================ */

/* ── Above-fold masthead ────────────────────────────────────── */

.masthead
{
    border-bottom: 1px solid var(--rule);
    padding: var(--space-16) var(--space-8) var(--space-12);
    position: relative;
    overflow: hidden;
}
.masthead::before
{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 39px,
        var(--rule) 39px,
        var(--rule) 40px
    );
    opacity: 0.35;
    pointer-events: none;
}
.masthead__inner
{
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-16);
    align-items: end;
    position: relative;
    z-index: 1;
}
.masthead__meta
{
    border-right: 1px solid var(--rule);
    padding-right: var(--space-16);
}
.masthead__issue-label
{
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: block;
    margin-bottom: var(--space-6);
}
.masthead__site-name
{
    font-family: var(--font-body);
    font-size: var(--size-3xl);
    font-weight: 500;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: var(--space-4);
}
.masthead__tagline
{
    font-family: var(--font-ui);
    font-size: var(--size-sm);
    color: var(--ink-3);
    line-height: var(--lh-loose);
    max-width: 22ch;
    margin-bottom: 0;
}
.masthead__featured
{
    padding-left: var(--space-4);
}
.masthead__featured-label
{
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.masthead__featured-label::before
{
    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 1px;
    background: var(--accent);
}
/* owner-only link to swap the featured article; sits at the row's right end */
.masthead__featured-pick
{
    margin-left: auto;
    color: var(--ink-3);
    border-bottom: none;
}
@media (hover: hover)
{
    .masthead__featured-pick:hover
    {
        color: var(--accent);
        border-bottom: none;
    }
}
.masthead__featured-title
{
    font-size: var(--size-2xl);
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: var(--space-4);
    letter-spacing: -0.01em;
}
.masthead__featured-title a
{
    color: var(--ink);
    border-bottom: none;
}
@media (hover: hover)
{
    .masthead__featured-title a:hover
    {
        color: var(--accent);
        border-bottom: none;
    }
}
.masthead__featured-subtitle
{
    font-family: var(--font-ui);
    font-size: var(--size-sm);
    color: var(--ink-3);
    margin-bottom: var(--space-3);
    font-style: italic;
}
.masthead__featured-excerpt
{
    color: var(--ink-2);
    font-size: var(--size-md);
    line-height: var(--lh-loose);
    margin-bottom: var(--space-6);
    max-width: 60ch;
}
.masthead__featured-byline
{
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    color: var(--ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0;
}
/* :not(.author-removed) so a removed author's name keeps its dimmed grey
   instead of being pulled back to the emphasised ink-2 of a live byline */
.masthead__featured-byline span:not(.author-removed)
{
    color: var(--ink-2);
}
.masthead__empty
{
    color: var(--ink-3);
    font-family: var(--font-ui);
    font-size: var(--size-sm);
    padding: var(--space-8);
}
/* ── Home body: 3-column info grid ──────────────────────────── */

.home-body
{
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--space-12) var(--space-8);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.home-block
{
    padding: 0 var(--space-8);
    border-right: 1px solid var(--rule);
}
.home-block:first-child { padding-left: 0; }
.home-block:last-child { border-right: none; padding-right: 0; }
.home-block__heading
{
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--ink);
}
.home-block__text
{
    font-size: var(--size-base);
    color: var(--ink-2);
    line-height: var(--lh-base);
    margin-bottom: var(--space-4);
}
.home-block__link
{
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    border-bottom: none;
}
@media (hover: hover)
{
    .home-block__link:hover { border-bottom: none; }
}
.home-block__btns
{
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
/* category list (reused from old sidebar) */

.category-list
{
    list-style: none;
}
.category-list li
{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--rule);
}
.category-list li:last-child
{
    border-bottom: none;
}
.category-list a
{
    font-family: var(--font-ui);
    font-size: var(--size-sm);
    color: var(--ink-2);
    border-bottom: none;
}
@media (hover: hover)
{
    .category-list a:hover
    {
        color: var(--accent);
    }
}
.category-list__count
{
    font-family: var(--font-mono);
    font-size: var(--size-xs);
    color: var(--ink-4);
}




/* ── Narrow screens ──────────────────────────────────────────── */

@media (max-width: 900px)
{
    /* meta and featured stack; the pinstripe band behind the featured
       column reads as noise once there is no second column */
    .masthead__inner { grid-template-columns: 1fr; gap: var(--space-8); }
    .masthead::before { display: none; }

    /* the column divider between meta and featured becomes a row divider */
    .masthead__meta

    {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid var(--rule);
        padding-bottom: var(--space-8);
    }

    .masthead__featured { padding-left: 0; }

    .home-body { grid-template-columns: 1fr; }

    .home-block

    {
        padding: var(--space-6) 0;
        border-right: none;
    }

    .home-block:first-child { padding-top: 0; }
}

@media (max-width: 700px)
{
    .masthead { padding: var(--space-12) var(--space-4) var(--space-8); }
    .home-body { padding: var(--space-8) var(--space-4); }
}