/* Reading library: original typographic cards, linking to external publishers. */
.posts-index-page { --mag-font-heading: var(--font-serif); --mag-font-body: var(--font-sans); }
.posts-index-page .mag-hero { padding: 145px 0 65px; background: #171a16; }
.posts-index-page .mag-hero-bg { background-size: cover; background-position: center; opacity: .14; }
.posts-index-page .mag-hero h1 { font-size: clamp(32px, 4.3vw, 58px); max-width: 950px; margin-inline: auto; font-style: normal; }
.posts-index-page .mag-hero p { font-size: 14px; line-height: 1.9; max-width: 670px; color: #b9b9ae; }
.posts-index-page .mag-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .18em; }
.magazine-library { padding: 12px 0 44px; border-bottom: 1px solid #b99a6133; margin-bottom: 60px; }
.magazine-library-heading { display: flex; gap: 32px; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; }
.magazine-library-heading h2 { font: 400 clamp(29px, 3vw, 40px)/1.3 var(--font-serif); color: #f1eee8; letter-spacing: -.035em; margin: 0; }
.magazine-library-heading > p { max-width: 310px; margin: 0 0 4px; font-size: 12px; line-height: 1.9; color: #a6a19a; }
.magazine-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.magazine-source { display: flex; flex-direction: column; min-width: 0; }
.magazine-source-art { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; aspect-ratio: .94; padding: 24px; overflow: hidden; box-shadow: 0 20px 40px #0003; transition: transform .3s; }
.magazine-source--elle .magazine-source-art { background: #dcd3c0; color: #35392b; }
.magazine-source--architecture .magazine-source-art { background: #57473b; color: #eee4d3; }
.magazine-source--ad .magazine-source-art { background: #344b44; color: #f0e6d4; }
.magazine-art-top { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid currentColor; padding-bottom: 12px; font-size: 8px; letter-spacing: .13em; opacity: .75; }
.magazine-art-name { align-self: flex-start; z-index: 1; margin: 20px 0 auto; font: 400 clamp(35px, 4.3vw, 64px)/1 var(--font-serif); letter-spacing: -.055em; }
.magazine-art-name > span { display: block; font: 500 9px/1.4 var(--font-sans); letter-spacing: .15em; margin-top: 12px; }
.magazine-art-shape { position: absolute; z-index: -1; width: 58%; height: 70%; right: -8%; bottom: -10%; border: 1px solid currentColor; border-radius: 150px 150px 0 0; transform: rotate(-20deg); opacity: .3; box-shadow: 0 0 0 18px #ffffff15, 0 0 0 36px #ffffff10, 0 0 0 54px #ffffff0a; }
.magazine-source--architecture .magazine-art-shape { transform: rotate(30deg); width: 70%; height: 65%; border-radius: 0; right: -10%; bottom: -12%; }
.magazine-source--ad .magazine-art-shape { transform: rotate(0); right: -15%; bottom: -10%; width: 80%; height: 80%; border-radius: 50%; }
.magazine-art-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 48px; font-size: 10px; letter-spacing: .1em; line-height: 1.7; }
.magazine-art-arrow { width: 40px; height: 40px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-size: 22px; }
.magazine-source-info { display: flex; flex: 1; flex-direction: column; padding-top: 24px; }
.magazine-source-language { color: #b99a61; font-size: 9px; letter-spacing: .1em; margin-bottom: 10px; }
.magazine-source-info h3 { font: 500 22px/1.35 var(--font-serif); color: #f1eee8; margin-bottom: 12px; }
.magazine-source-info p { color: #a6a19a; font-size: 12px; line-height: 1.85; margin-bottom: 24px; }
.magazine-source-link { display: flex; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 15px; border-top: 1px solid #ffffff22; color: #d1c6b1; font-size: 10px; }
.magazine-source:hover .magazine-source-art { transform: translateY(-6px); }
.magazine-source:hover h3 { color: #d4b47d; }
.posts-page-wrapper .magazine-source:focus-visible { outline: 2px solid #d4b47d; outline-offset: 6px; }
.magazine-library-note { margin: 26px 0 0; color: #8f8b83; font-size: 10px; line-height: 1.8; }
.journal-section-heading h2 { font: 400 34px var(--font-serif); color: #f1eee8; margin-bottom: 24px; }
.posts-index-page .mag-empty { border: 1px solid #ffffff14; padding: 48px 24px; background: #11120f; }
.posts-index-page .mag-empty h2 { font-size: 24px; }
.posts-index-page .mag-empty p { font-size: 13px; }
@media (max-width: 991px) {
    .magazine-library-grid { gap: 20px; }
    .magazine-source-art { padding: 18px; min-height: 260px; }
    .magazine-art-name { font-size: 36px; }
    .magazine-art-top { font-size: 7px; letter-spacing: 0; }
    .magazine-source-info h3 { font-size: 20px; }
}
@media (max-width: 640px) {
    .posts-index-page .mag-hero { padding: 120px 0 42px; }
    .magazine-library-heading { flex-direction: column; align-items: flex-start; gap: 18px; }
    .magazine-library-heading > p { max-width: none; }
    .magazine-library-grid { grid-template-columns: 1fr; gap: 36px; }
    .magazine-source-art { aspect-ratio: 1.25; padding: 24px; min-height: 0; }
    .magazine-art-name { font-size: 52px; }
    .magazine-art-top { font-size: 8px; letter-spacing: .13em; }
}
@media (prefers-reduced-motion: reduce) {
    .magazine-source-art { transition: none; }
    .magazine-source:hover .magazine-source-art { transform: none; }
}
