:root {
    --paper: #f3f0ea;
    --ink: #1c1b19;
    --muted: #68635e;
    --line: #b8b0a6;
    --accent: #bc745d;
    --serif: 'Playfair Display', Georgia, serif;
    --mono: 'DM Mono', monospace;
    --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);
    -webkit-font-smoothing: antialiased
}

a {
    color: inherit;
    text-decoration: none
}

img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain
}

.shell {
    max-width: 1510px;
    margin: auto;
    padding: 0 clamp(20px, 4vw, 64px)
}

.site-header {
    height: 105px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--ink)
}

.wordmark {
    font: 500 clamp(34px, 3.5vw, 53px)/1 var(--serif);
    letter-spacing: -.065em
}

.navigation {
    display: flex;
    gap: clamp(20px, 3vw, 47px);
    font: 12px var(--mono);
    text-transform: uppercase;
    letter-spacing: .04em
}

.navigation a {
    transition: color .2s
}

.navigation a:hover,
.navigation a.active {
    color: var(--accent)
}

.menu-button {
    display: none
}

.hero {
    padding: 42px 0 65px
}

.hero-info {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.serif-italic {
    font: italic 19px var(--serif)
}

.issue,
.eyebrow,
.hero-bottom,
.archive-head,
.entry-meta,
.entry-information .eyebrow,
.site-footer,
.collection-header>p,
.post-header-line,
.photo-figure figcaption,
.post-pagination>a>span,
.small-note {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .055em
}

.issue {
    font-style: italic
}

.hero h1 {
    font: 400 clamp(55px, 8.2vw, 126px)/1.14 var(--serif);
    letter-spacing: -.065em;
    max-width: 1020px;
    margin: 55px 0 35px
}

.highlight-line {
    display: inline-block;
    background: #cf9d8b;
    width: 75px;
    height: 10px;
    margin-left: 20px;
    transform: rotate(-5deg);
    opacity: .65
}

.hero-bottom {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding-top: 16px;
    color: var(--muted)
}

.archive-head {
    display: flex;
    justify-content: space-between;
    padding: 22px 0;
    border-top: 2px solid var(--ink);
    text-transform: uppercase
}

.entry-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 58px 32px;
    padding-bottom: 110px
}

.entry {
    grid-column: span 4;
    min-width: 0
}

.entry.card-wide {
    grid-column: span 7
}

.entry.card-tall {
    grid-column: span 5
}

.entry.card-text {
    grid-column: span 4;
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.entry.card-text .entry-link {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0
}

.entry-image {
    overflow: hidden;
    background: #d7cec3
}

/* Portadas: proporción natural, sin recortes */
.entry-image img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    max-height: none;
    object-fit: contain
}

.card-wide .entry-image img {
    height: auto;
    aspect-ratio: auto
}

.card-tall .entry-image img {
    height: auto;
    aspect-ratio: auto
}

/* No ampliar imágenes al pasar el cursor: evita recortes */
.entry-link:hover img {
    transform: none
}

.entry-information {
    padding: 16px 0 0
}

.entry-information .eyebrow {
    display: flex;
    justify-content: space-between;
    letter-spacing: .18em
}

.eyebrow-id {
    color: var(--muted)
}

.entry-information h2 {
    font: 400 clamp(28px, 3.1vw, 47px)/1.18 var(--serif);
    letter-spacing: -.045em;
    margin: 12px 0 18px
}

.entry.card-text h2 {
    font-style: italic;
    font-size: clamp(32px, 3.5vw, 54px)
}

.card-excerpt {
    font: 16px/1.6 var(--serif);
    max-width: 330px
}

.entry-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 0;
    border-top: 1px solid var(--line);
    color: var(--muted)
}

.site-footer {
    border-top: 1px solid var(--ink);
    padding: 24px 0 45px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted)
}

.collection-header {
    padding: 70px 0 56px
}

.collection-header h1 {
    font: 400 clamp(72px, 11vw, 158px)/1 var(--serif);
    letter-spacing: -.07em;
    margin: 22px 0
}

.period {
    color: var(--accent)
}

.collection-header>p {
    font-size: 13px;
    color: var(--muted)
}

.post-header {
    padding: 70px 0 42px
}

.post-header h1 {
    font: 400 clamp(60px, 9vw, 125px)/1.13 var(--serif);
    letter-spacing: -.055em;
    margin: 22px 0 35px;
    max-width: 1130px
}

.post-header-line {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 18px;
    text-transform: uppercase
}

.post-deck {
    font: italic clamp(18px, 2vw, 25px)/1.6 var(--serif);
    max-width: 720px;
    margin: 30px 0 0
}

.photo-intro {
    max-width: 750px;
    font: italic 23px/1.7 var(--serif);
    margin: 0 0 32px
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 35px 28px
}

.photo-figure {
    margin: 0;
    grid-column: span 6
}

/* Galería: se conserva la relación de aspecto original */
.photo-figure img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    max-height: none;
    object-fit: contain
}

.photo-figure.photo-0,
.photo-figure.photo-6 {
    grid-column: span 8
}

.photo-figure.photo-1,
.photo-figure.photo-5 {
    grid-column: span 4
}

.photo-figure.photo-2,
.photo-figure.photo-3,
.photo-figure.photo-4 {
    grid-column: span 4
}

.photo-figure.photo-6 {
    grid-column: span 12
}

.photo-figure.photo-6 img {
    height: auto;
    aspect-ratio: auto;
    max-height: none
}

.photo-figure figcaption {
    padding-top: 9px;
    font-size: 10px;
    line-height: 1.7;
    color: var(--muted)
}

.photo-figure figcaption span {
    color: var(--ink)
}

.writing-article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, .7fr);
    gap: 8%;
    padding-top: 10px;
    align-items: start
}

.prose {
    font: 19px/1.85 var(--serif);
    max-width: 750px
}

.prose p {
    margin: 0 0 26px
}

.prose p:first-of-type::first-letter {
    font: 76px/.9 var(--serif);
    float: left;
    padding-right: 8px
}

.prose blockquote {
    border-left: 4px solid #d5a697;
    margin: 45px 0;
    padding: 10px 0 10px 27px;
    font: italic clamp(25px, 3vw, 42px)/1.45 var(--serif)
}

.prose blockquote p {
    margin: 0
}

.prose h2 {
    font-size: 32px;
    font-weight: 400
}

.prose a {
    text-decoration: underline;
    text-underline-offset: 3px
}

.writing-image {
    margin: 0;
    position: sticky;
    top: 30px
}

.writing-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.post-pagination {
    border-top: 1px solid var(--ink);
    margin-top: 100px;
    padding: 30px 0 65px;
    display: flex;
    justify-content: space-between;
    gap: 20px
}

.post-pagination a {
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-width: 45%
}

.post-pagination a:last-child {
    text-align: right
}

.post-pagination strong {
    font: italic 23px var(--serif);
    font-weight: 400
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10%;
    padding: 15px 0 150px
}

.about-feature h2 {
    font: italic clamp(35px, 5vw, 72px)/1.2 var(--serif);
    letter-spacing: -.05em;
    font-weight: 400
}

.about-copy {
    font: 20px/1.8 var(--serif)
}

.small-note {
    margin-top: 48px;
    font-size: 12px
}

.small-note a {
    text-decoration: underline
}

@media(max-width:900px) {
    .entry-grid {
        gap: 40px 20px
    }

    .card-wide .entry-image img,
    .card-tall .entry-image img {
        height: auto;
        aspect-ratio: auto
    }

    .entry.card-text {
        grid-column: span 6
    }

    .entry.card-wide,
    .entry.card-tall {
        grid-column: span 6
    }

    .photo-figure.photo-0,
    .photo-figure.photo-1,
    .photo-figure.photo-2,
    .photo-figure.photo-3,
    .photo-figure.photo-4,
    .photo-figure.photo-5 {
        grid-column: span 6
    }

    .photo-figure img {
        height: auto;
        max-height: none
    }
}

@media(max-width:650px) {
    .shell {
        padding: 0 19px
    }

    .site-header {
        height: 79px;
        position: relative
    }

    .wordmark {
        font-size: 39px
    }

    .menu-button {
        display: block;
        background: none;
        border: 0;
        font: 12px var(--mono);
        text-transform: uppercase;
        padding: 15px 0;
        cursor: pointer
    }

    .navigation {
        display: none;
        position: absolute;
        z-index: 10;
        top: 78px;
        left: -19px;
        right: -19px;
        background: var(--paper);
        border-bottom: 1px solid var(--ink);
        padding: 23px;
        flex-direction: column;
        gap: 24px
    }

    .navigation.is-open {
        display: flex
    }

    .hero {
        padding: 30px 0 55px
    }

    .hero h1 {
        font-size: clamp(55px, 12vw, 78px);
        margin: 38px 0
    }

    .hero-bottom span:last-child {
        display: none
    }

    .archive-head {
        font-size: 10px
    }

    .archive-head span:last-child {
        display: none
    }

    .entry-grid {
        display: block;
        padding-bottom: 70px
    }

    .entry {
        margin-bottom: 44px
    }

    .entry.card-text {
        min-height: 280px
    }

    .entry-image img,
    .card-wide .entry-image img,
    .card-tall .entry-image img {
        height: auto;
        aspect-ratio: auto;
        max-height: none
    }

    .card-tall .entry-image img {
        aspect-ratio: auto
    }

    .entry-information h2 {
        font-size: 37px
    }

    .collection-header {
        padding: 55px 0 35px
    }

    .collection-header h1 {
        font-size: 76px
    }

    .post-header {
        padding: 48px 0 25px
    }

    .post-header h1 {
        font-size: clamp(54px, 11.5vw, 80px)
    }

    .photo-grid {
        gap: 24px
    }

    .photo-figure,
    .photo-figure.photo-0,
    .photo-figure.photo-1,
    .photo-figure.photo-2,
    .photo-figure.photo-3,
    .photo-figure.photo-4,
    .photo-figure.photo-5,
    .photo-figure.photo-6 {
        grid-column: span 12
    }

    .photo-figure img,
    .photo-figure.photo-6 img {
        height: auto;
        max-height: none
    }

    .photo-intro {
        font-size: 19px
    }

    .writing-article,
    .about-grid {
        display: block
    }

    .writing-image {
        position: static;
        margin: 40px 0
    }

    .writing-image img {
        height: auto;
        max-height: none
    }

    .prose {
        font-size: 18px
    }

    .prose blockquote {
        font-size: 28px
    }

    .post-pagination {
        margin-top: 65px
    }

    .post-pagination strong {
        font-size: 17px
    }

    .site-footer {
        flex-direction: column;
        gap: 12px;
        font-size: 10px
    }

    .about-grid {
        padding-bottom: 80px
    }
}