.magazine-intro { display: flex; justify-content: space-between; align-items: end; gap: 48px; padding-block: 42px 34px; }
.magazine-intro h1 { font: 400 clamp(38px, 4.6vw, 64px)/1.05 var(--serif); letter-spacing: -2px; max-width: 790px; margin-top: 14px; }
.magazine-intro-copy { color: var(--muted); font-size: 13px; line-height: 1.85; width: 270px; flex-shrink: 0; padding-bottom: 3px; }
.magazine-feature { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 530px; background: #eee3d5; }
.feature-image { display: block; position: relative; min-width: 0; min-height: 100%; overflow: hidden; background: var(--image-surface); }
.feature-image img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.feature-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 36px 44px 32px; }
.feature-kicker { display: flex; justify-content: space-between; align-items: baseline; width: 100%; margin-bottom: 32px; border-bottom: 1px solid #cdbba9; padding-bottom: 16px; }
.feature-kicker > span:last-child { font: italic 400 30px/1 var(--serif); color: var(--accent); }
.feature-title { font: 400 clamp(29px, 2.7vw, 40px)/1.13 var(--serif); letter-spacing: -.9px; margin: 10px 0 18px; text-wrap: balance; }
.feature-title a:hover { color: var(--accent); }
.feature-excerpt { color: #6a584b; font-size: 14px; line-height: 1.85; }
.feature-source { color: #6a584b; font-size: 11px; margin-top: 20px; }
.feature-source span { color: var(--ink); }
.feature-read { display: flex; align-items: center; justify-content: space-between; align-self: stretch; min-height: 60px; gap: 16px; padding-top: 20px; margin-top: auto; font-size: 12px; color: var(--ink); }
.feature-read > span { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #b89b84; border-radius: 50%; }
.feature-read:hover > span { background: var(--chocolate); color: var(--paper); border-color: var(--chocolate); }
.magazine-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-block: 64px 32px; border-bottom: 1px solid var(--line); padding-bottom: 24px; }
.magazine-section-heading h2 { font: 400 42px/1.1 var(--serif); letter-spacing: -1px; margin-top: 10px; }
.magazine-count { font-size: 11px; letter-spacing: .12em; color: var(--muted); padding-bottom: 4px; }
.magazine-topics { background: var(--chocolate); color: #f7eee3; padding-block: 56px 64px; }
.magazine-topics-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 36px; }
.magazine-topics .eyebrow { color: #d7b59d; }
.magazine-topics h2 { color: #f7eee3; font: 400 46px/1.15 var(--serif); letter-spacing: -1px; margin-top: 12px; }
.magazine-topics-heading > p { max-width: 270px; font-size: 13px; color: #d7c6b6; line-height: 1.85; }
.topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
.topic-grid a { display: grid; grid-template-columns: 24px minmax(0, 1fr) 18px; align-items: center; gap: 10px; min-height: 80px; border-top: 1px solid #705745; font-size: 14px; color: #f7eee3; }
.topic-grid a:hover { color: #e7bfa4; }
.topic-number { color: #d7b59d; font-size: 10px; }
.topic-grid svg { width: 18px; height: 18px; }

@media (max-width: 1100px) {
    .magazine-intro { gap: 32px; }
    .magazine-intro-copy { width: 230px; }
    .magazine-feature { grid-template-columns: 1.05fr 1fr; min-height: 500px; }
    .feature-copy { padding: 28px 30px; }
    .feature-title { font-size: 32px; }
    .feature-kicker { margin-bottom: 24px; }
    .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .magazine-intro { display: block; }
    .magazine-intro h1 { font-size: 52px; max-width: none; }
    .magazine-intro-copy { width: auto; max-width: 540px; margin-top: 20px; }
    .magazine-feature { grid-template-columns: 1fr 1fr; min-height: 540px; }
    .feature-copy { padding: 24px; }
    .feature-title { font-size: 30px; }
    .feature-excerpt { font-size: 13px; }
}
@media (max-width: 767px) {
    .magazine-intro { padding-block: 28px; }
    .magazine-intro h1 { font-size: 44px; letter-spacing: -1.4px; }
    .magazine-intro-copy { font-size: 13px; margin-top: 16px; }
    .magazine-feature { grid-template-columns: 1fr; min-height: 0; }
    .feature-image { aspect-ratio: 1.12; min-height: 0; }
    .feature-copy { padding: 24px 24px 20px; }
    .feature-kicker { margin-bottom: 18px; padding-bottom: 14px; }
    .feature-title { font-size: 34px; margin-block: 8px 16px; letter-spacing: -.8px; }
    .feature-excerpt { font-size: 15px; }
    .feature-source { margin-top: 18px; }
    .feature-read { margin-top: 8px; }
    .magazine-section-heading { margin-block: 44px 28px; padding-bottom: 22px; }
    .magazine-section-heading h2 { font-size: 35px; }
    .magazine-topics { padding-block: 40px; }
    .magazine-topics-heading { display: block; margin-bottom: 28px; }
    .magazine-topics h2 { font-size: 38px; }
    .magazine-topics-heading > p { margin-top: 18px; }
    .topic-grid { gap: 0 24px; }
    .topic-grid a { grid-template-columns: 18px minmax(0, 1fr) 14px; gap: 6px; font-size: 12px; min-height: 76px; }
    .topic-grid svg { width: 14px; height: 14px; }
}
@media (max-width: 374px) {
    .magazine-intro h1 { font-size: 38px; }
    .feature-copy { padding-inline: 20px; }
    .feature-title { font-size: 30px; }
    .topic-grid { grid-template-columns: 1fr; }
}
