html { scroll-padding-top: 90px; }
.eyebrow { color: var(--accent); font-size: .75rem; letter-spacing: .12em; margin: 0 0 6px; }
.catalog-title { display:flex; align-items:center; justify-content:space-between; font-size:1.1rem; margin:22px 0 14px; }
.catalog-title span { font-size:.72rem; font-weight:500; color:var(--dim); }
.topic-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.topic-list li { min-width:0; }
.topic-list a { width:100%; min-width:0; position:relative; isolation:isolate; overflow:hidden; justify-content:flex-end; min-height:280px; aspect-ratio:3/4; padding:16px 13px; margin:0; border-radius:18px; border:1px solid #ffffff10; gap:7px; background:linear-gradient(135deg,#44315b,#1f192b); }
.topic-list a::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(13,10,20,.05) 20%,rgba(13,10,20,.30) 42%,rgba(13,10,20,.90) 78%,#100c19 100%); }
.topic-art { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 20%; transition:transform .25s; }
.topic-emoji { position:absolute; top:15%; align-self:center; font-size:4rem; z-index:-2; }
.topic-tag { position:absolute; top:12px; left:12px; font-size:.65rem; color:#fff; padding:3px 9px; border:1px solid #ffffff30; border-radius:30px; background:#16102180; }
.t-title { font-size:1.08rem; line-height:1.35; letter-spacing:-.04em; color:#fff; }
.t-hook { color:#e0d9e8; line-height:1.5; font-size:.77rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.t-go { font-size:.77rem; line-height:1.4; margin-top:3px; }
.topic-list a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@media (hover:hover) { .topic-list a:hover .topic-art { transform:scale(1.045); } }
@media (max-width:360px) { .topic-list { gap:10px; } .topic-list a { padding:12px 10px; min-height:245px; } .t-title { font-size:.98rem; } }
@media (prefers-reduced-motion:reduce) { .topic-art { transition:none; } }
.recovery { text-align:center; padding:32px 12px; }
.recovery-img { width:120px; height:120px; border-radius:50%; object-fit:cover; object-position:50% 20%; margin:0 auto 16px; border:3px solid #c9a2ff40; }
.recovery h1 { font-size:1.4rem; }
.recovery .cta { margin-top:16px; }