/* ============================================================
   After Image — print magazine stylesheet
   Palette: paper #F4F1EA · ink #1A1917 · halide #C8C4BC
            fixer #E6C35C · emulsion #9C2F2F
   ============================================================ */

:root {
    --paper: #F4F1EA;
    --ink: #1A1917;
    --halide: #C8C4BC;
    --fixer: #E6C35C;
    --emulsion: #9C2F2F;
}

* { box-sizing: border-box; }

html { background-color: var(--paper); }

body {
    margin: 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    background-color: var(--paper);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- Masthead / chrome ---------- */

.masthead {
    text-align: center;
    padding: 2.5rem 1.5rem 1.25rem;
    border-bottom: 1px solid rgba(26, 25, 23, 0.18);
}

.masthead-name {
    margin: 0;
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.masthead-line {
    margin: 0.6rem 0 0;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(26, 25, 23, 0.7);
}

.masthead-dot { margin: 0 0.4em; color: var(--emulsion); }

.site-nav { border-bottom: 1px solid rgba(26, 25, 23, 0.18); }

.site-nav-inner {
    max-width: 76rem;
    margin: 0 auto;
    padding: 0.85rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 2.2rem;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.site-nav-inner a:hover,
.site-footer-nav a:hover { color: var(--emulsion); }

.site-footer {
    border-top: 1px solid rgba(26, 25, 23, 0.18);
    margin-top: 4rem;
}

.site-footer-inner {
    max-width: 76rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
    text-align: center;
}

.site-footer-brand {
    margin: 0;
    font-size: 1.4rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.site-footer-brand span {
    color: rgba(26, 25, 23, 0.55);
    font-size: 11px;
    letter-spacing: 0.26em;
    display: block;
    margin-top: 0.5rem;
    text-transform: uppercase;
}

.site-footer-nav {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.6rem;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(26, 25, 23, 0.75);
}

.site-footer-note {
    margin-top: 1.75rem;
    font-size: 12px;
    color: rgba(26, 25, 23, 0.55);
}

/* ---------- Homepage cover ---------- */

.cover-figure { margin: 0; }

.cover-img {
    width: 100%;
    height: 78vh;
    min-height: 30rem;
    object-fit: cover;
}

.cover-notes { border-bottom: 1px solid rgba(26, 25, 23, 0.18); }

.cover-notes-inner {
    max-width: 36rem;
    margin: 0 auto;
    padding: 1.4rem 1.5rem;
}

.cover-number {
    margin: 0 0 0.4rem;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--emulsion);
}

.cover-caption { margin: 0; font-size: 14px; line-height: 1.65; }

.cover-credit {
    margin: 0.5rem 0 0;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(26, 25, 23, 0.6);
}

/* ---------- Section blocks / ruled index ---------- */

.section-block {
    max-width: 76rem;
    margin: 0 auto;
    padding: 4rem 1.5rem 1.5rem;
}

.index-label {
    margin: 0;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(26, 25, 23, 0.6);
    border-bottom: 1px solid rgba(26, 25, 23, 0.18);
    padding-bottom: 0.8rem;
}

.index-row {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid rgba(26, 25, 23, 0.18);
}

.index-row-name {
    flex: 0 0 9rem;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.index-row-count {
    flex: 0 0 1.6rem;
    font-size: 12px;
    color: rgba(26, 25, 23, 0.5);
}

.index-row-title {
    font-size: 14px;
    color: rgba(26, 25, 23, 0.72);
}

.index-row:hover .index-row-title { color: var(--emulsion); }

/* ---------- Lead story + story river ---------- */

.lead-story { border-bottom: 1px solid rgba(26, 25, 23, 0.18); padding-bottom: 3rem; }

.lead-img {
    width: 100%;
    max-height: 62vh;
    object-fit: cover;
    margin-bottom: 1.75rem;
}

.lead-section {
    margin: 0 0 0.6rem;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--emulsion);
}

.lead-title {
    margin: 0;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    font-weight: 400;
    line-height: 1.15;
}

.lead-dek {
    margin: 1rem 0 0;
    max-width: 42rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: rgba(26, 25, 23, 0.78);
}

.lead-byline {
    margin: 0.9rem 0 0;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(26, 25, 23, 0.6);
}

.river-label { margin-top: 3.5rem; }

.river-row {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid rgba(26, 25, 23, 0.18);
}

.river-row-section {
    flex: 0 0 8rem;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(26, 25, 23, 0.55);
}

.river-row-title { flex: 1 1 auto; font-size: 1.15rem; }

.river-row-byline {
    flex: 0 0 11rem;
    text-align: right;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(26, 25, 23, 0.55);
}

.river-row:hover .river-row-title { color: var(--emulsion); }

/* ---------- Magazine page ---------- */

.magazine-hero { border-bottom: 1px solid rgba(26, 25, 23, 0.18); }

.magazine-cover-img {
    width: 100%;
    max-height: 70vh;
    object-fit: cover;
}

.magazine-title {
    margin: 0.4rem 0 0;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 400;
}

.magazine-dek {
    margin: 1rem 0 0;
    max-width: 40rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: rgba(26, 25, 23, 0.78);
}

.toc-row {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1.3rem 0;
    border-bottom: 1px solid rgba(26, 25, 23, 0.18);
}

.toc-section {
    flex: 0 0 8rem;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(26, 25, 23, 0.55);
}

.toc-title { flex: 1 1 auto; font-size: 1.12rem; }

.toc-byline {
    flex: 0 0 11rem;
    text-align: right;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(26, 25, 23, 0.55);
}

.toc-row:hover .toc-title { color: var(--emulsion); }

/* ---------- Article page ---------- */

.article-block { max-width: 46rem; padding-top: 4.5rem; }

.article-section {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--emulsion);
}

.article-title {
    margin: 0.8rem 0 0;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 400;
    line-height: 1.12;
}

.article-dek {
    margin: 1.1rem 0 0;
    font-size: 1.12rem;
    line-height: 1.6;
    color: rgba(26, 25, 23, 0.8);
}

.article-byline {
    margin: 1rem 0 0;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(26, 25, 23, 0.6);
}

.article-figure { margin: 2.5rem 0 0; }

.article-hero { width: 100%; max-height: 55vh; object-fit: cover; }

.article-body {
    margin-top: 2.5rem;
    font-size: 1.06rem;
    line-height: 1.85;
}

.article-body p { margin: 0 0 1.35em; }

.article-footer {
    margin-top: 3.5rem;
    border-top: 1px solid rgba(26, 25, 23, 0.18);
    padding-top: 1.5rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.article-back {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--emulsion);
}

/* ---------- Section page ---------- */

.section-title {
    margin: 0;
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.section-note {
    margin: 0.8rem 0 0;
    font-size: 14px;
    color: rgba(26, 25, 23, 0.65);
}

.section-list { margin-top: 3rem; }

.section-row {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 2rem;
    padding: 2rem 0;
    border-bottom: 1px solid rgba(26, 25, 23, 0.18);
}

.section-row-img img { width: 100%; height: 12rem; object-fit: cover; }

.section-row-title { margin: 0; font-size: 1.5rem; font-weight: 400; line-height: 1.2; }
.section-row-title a:hover { color: var(--emulsion); }

.section-row-dek { margin: 0.8rem 0 0; font-size: 0.98rem; color: rgba(26, 25, 23, 0.75); }

.section-row-meta {
    margin: 1rem 0 0;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(26, 25, 23, 0.55);
}

.meta-dot { margin: 0 0.5em; color: var(--emulsion); }

/* ---------- Contributors ---------- */

.contributors-grid {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem 4rem;
}

.contributor { border-top: 1px solid rgba(26, 25, 23, 0.18); padding-top: 1.5rem; }

.contributor-img { width: 6rem; height: 6rem; object-fit: cover; margin-bottom: 1rem; }

.contributor-name { margin: 0; font-size: 1.35rem; font-weight: 400; }

.contributor-role {
    margin: 0.3rem 0 0;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--emulsion);
}

.contributor-bio { margin: 0.8rem 0 0; font-size: 0.95rem; color: rgba(26, 25, 23, 0.75); }

/* ---------- About / newsletter ---------- */

.about-block { max-width: 42rem; }

.about-lede {
    margin: 1.4rem 0 0;
    font-size: 1.25rem;
    line-height: 1.55;
}

.newsletter-link { color: var(--emulsion); border-bottom: 1px solid rgba(158, 47, 47, 0.35); }

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
    .cover-img { height: 60vh; }
    .index-row { flex-wrap: wrap; gap: 0.4rem 1rem; }
    .index-row-name { flex: 1 1 100%; }
    .river-row { flex-wrap: wrap; gap: 0.4rem 1rem; }
    .river-row-section { flex: 1 1 100%; }
    .river-row-byline { flex: 1 1 100%; text-align: left; }
    .toc-row { flex-wrap: wrap; gap: 0.4rem 1rem; }
    .toc-section { flex: 1 1 100%; }
    .toc-byline { flex: 1 1 100%; text-align: left; }
    .section-row { grid-template-columns: 1fr; gap: 1rem; }
    .contributors-grid { grid-template-columns: 1fr; gap: 2rem; }
    .site-nav-inner { gap: 0.5rem 1.4rem; }
}