.topic-shelf { max-width:1440px; margin:24px auto; padding:0 24px; }
.topic-shelf-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; }
.topic-shelf-heading h2 { margin:0; font-size:1.55rem; }
.topic-shelf-heading a { color:var(--teal); font-weight:700; text-underline-offset:4px; }
.topic-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding:0; margin:0; list-style:none; }
.topic-card { display:grid; grid-template-columns:112px minmax(0,1fr); height:100%; overflow:hidden; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:#fffdf9; text-decoration:none; }
.topic-card > img { display:block; width:112px; height:100%; min-height:200px; max-height:260px; object-fit:contain; background:#ece8df; }
.topic-card-copy { display:flex; flex-direction:column; gap:12px; padding:20px 18px; min-width:0; }
.topic-card-title { font-size:1.12rem; line-height:1.55; }
.topic-card-description { color:var(--muted); font-size:.84rem; line-height:1.8; }
.topic-card-meta { margin-top:auto; color:var(--teal); font-size:.75rem; line-height:1.6; }
.topic-card:hover { border-color:var(--rose); box-shadow:0 6px 22px #231f2010; }
.topic-card:focus-visible { outline:3px solid var(--rose); outline-offset:4px; }
.topic-index .content-lead { margin-bottom:14px; }
.topic-index .topic-list { margin-top:28px; grid-template-columns:1fr; }
.topic-index .topic-card { grid-template-columns:144px minmax(0,1fr); }
.topic-index .topic-card > img { width:144px; min-height:192px; max-height:230px; }
.topic-index .topic-card-title { font-size:1.4rem; }
@media(max-width:1080px) { .topic-list { grid-template-columns:1fr; } .topic-card > img { min-height:150px; max-height:190px; } }
@media(max-width:560px) {
 .topic-shelf { padding:0 12px; margin:18px auto; }
 .topic-shelf-heading { align-items:baseline; gap:12px; }
 .topic-shelf-heading a { font-size:.82rem; }
 .topic-card,.topic-index .topic-card { grid-template-columns:96px minmax(0,1fr); }
 .topic-card > img,.topic-index .topic-card > img { width:96px; min-height:160px; max-height:none; }
 .topic-card-copy { padding:15px 12px; gap:9px; }
 .topic-card-title,.topic-index .topic-card-title { font-size:1rem; }
 .topic-card-description { font-size:.78rem; }
 .topic-card-meta { font-size:.7rem; }
}