@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Libre+Caslon+Display&display=swap');

:root {
    --paper: #f3efe6;
    --paper-deep: #e8e0d2;
    --ink: #25211e;
    --muted: #716a62;
    --wine: #7b2638;
    --rule: #b9ad9d;
    --serif: "Libre Caslon Display", Georgia, serif;
    --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.72;
    text-rendering: optimizeLegibility;
}
body::before {
    content: "";
    display: block;
    height: 5px;
    background: var(--wine);
}
a { color: var(--wine); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
a:focus-visible { outline: 2px solid var(--wine); outline-offset: 5px; }

.top-center-text {
    color: var(--ink);
    font: 400 clamp(1.8rem, 3vw, 2.55rem)/1 var(--serif);
    letter-spacing: -.03em;
    text-decoration: none;
}
.social-links a, .back-button {
    color: var(--ink);
    font-size: .73rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-decoration: none;
    text-transform: uppercase;
}
.social-links a:hover, .back-button:hover { color: var(--wine); }

/* Existing editorial pages */
body > .top-center-text { max-width: 860px; margin: 0 auto; padding: 42px 24px 10px; text-align: center; }
.social-links { max-width: 860px; margin: 0 auto; padding: 4px 24px 28px; text-align: center; border-bottom: 1px solid var(--rule); }
.social-links a { margin: 0 10px; }
.back-button { position: absolute; top: 30px; left: max(24px, calc(50% - 560px)); }
.content { max-width: 860px; margin: 0 auto; padding: 76px 34px 100px; }
.content > h2 { margin: 0 0 17px; font: 400 clamp(3rem, 7vw, 5.4rem)/.98 var(--serif); letter-spacing: -.045em; }
.content > h2::after { content: ""; display: block; width: 62px; margin-top: 27px; border-bottom: 3px solid var(--wine); }
.content p, .content li { max-width: 720px; }
.publication { margin-top: 0; padding: 28px 0 30px; border-top: 1px solid var(--rule); }
.publication:first-of-type { margin-top: 54px; border-top-color: var(--ink); }
.publication-title { color: var(--ink); font: 400 1.55rem/1.3 var(--serif); text-decoration: none; }
.publication-title:hover { color: var(--wine); }
.publication-subtitle { margin-top: 8px; color: var(--muted); font: italic 1rem/1.5 Georgia, serif; }
.publication-authors { margin-top: 8px; }
.publication-venue { margin-top: 9px; color: var(--muted); font-size: .73rem; letter-spacing: .08em; text-transform: uppercase; }
.writing-piece { padding: 28px 0 30px; border-top: 1px solid var(--rule); }
.writing-piece:first-of-type { margin-top: 54px; border-top-color: var(--ink); }
.writing-title { color: var(--ink); font: 400 1.55rem/1.3 var(--serif); text-decoration: none; }
.writing-title:hover { color: var(--wine); }
.writing-date,
.article-meta { margin-top: 9px; color: var(--muted); font-size: .73rem; letter-spacing: .08em; text-transform: uppercase; }
.year-header { margin: 55px 0 17px; color: var(--ink); font: 400 2rem/1.2 var(--serif); letter-spacing: -.02em; }
.year-header { padding-top: 20px; border-top: 1px solid var(--rule); }

.article-page .content { max-width: 920px; }
.article-page .content > h2 { max-width: 820px; }
.article-meta a { text-decoration: none; }
.article-body { margin-top: 46px; }
.article-body p { font-family: Georgia, serif; font-size: 1.08rem; line-height: 1.82; }
.section-header { margin: 55px 0 17px; color: var(--ink); font: 400 2rem/1.2 var(--serif); letter-spacing: -.02em; }
.image-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 780px);
    gap: 8px;
    margin: 30px 0 20px;
}
.image-row img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image-row.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.image-row.three-up img { aspect-ratio: 3 / 4; }
.image-row.portrait-pair img { aspect-ratio: 2 / 3; }
.image-row.landscape-pair img { aspect-ratio: 4 / 3; }
.image-row.mixed-pair { grid-template-columns: 3fr 5.33fr; }
.image-row.mixed-pair img:first-child { aspect-ratio: 3 / 4; }
.image-row.mixed-pair img:last-child { aspect-ratio: 4 / 3; }
.image-caption { margin: -8px 0 32px; color: var(--muted); font-size: .72rem; text-align: center; }

@media (max-width: 720px) {
    .back-button { position: static; display: block; width: fit-content; margin: 22px 0 0 20px; }
    body > .top-center-text { padding-top: 24px; }
    .content { padding: 55px 22px 75px; }
    .image-row { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Homepage — a restrained update of the original single-column layout */
.home-page { min-height: 100vh; }
.home-header,
.introduction,
.bottom-links {
    width: min(100% - 40px, 800px);
    margin-inline: auto;
}
.home-header {
    padding: 72px 0 28px;
    text-align: center;
    border-bottom: 1px solid var(--rule);
}
.home-name {
    color: var(--ink);
    font: 400 clamp(3.1rem, 8vw, 5.1rem)/1 var(--serif);
    letter-spacing: -.05em;
    text-decoration: none;
}
.home-social {
    padding: 22px 0 0;
    border-bottom: 0;
}
.introduction { padding: 64px 0 55px; }
.introduction h1 {
    margin: 0 0 35px;
    font: 400 clamp(2.15rem, 5vw, 3.3rem)/1.08 var(--serif);
    letter-spacing: -.035em;
}
.introduction h1::after {
    content: "";
    display: block;
    width: 48px;
    margin-top: 18px;
    border-bottom: 3px solid var(--wine);
}
.introduction p { margin: 0 0 1.25em; }
.primary-links {
    margin-top: 48px;
    border-top: 1px solid var(--ink);
}
.primary-links a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 22px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    font: 400 1.65rem/1.2 var(--serif);
    text-decoration: none;
}
.primary-links a:hover { color: var(--wine); }
.bottom-links {
    padding: 27px 0 45px;
    border-top: 1px solid var(--rule);
    text-align: center;
}
.bottom-links a {
    color: var(--ink);
    font-size: .73rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-decoration: none;
    text-transform: uppercase;
}
.bottom-links a:hover { color: var(--wine); }

@media (max-width: 720px) {
    .home-header { padding-top: 52px; }
    .introduction { padding: 48px 0 42px; }
}