/* Topic-directory component. Card dimensions are independent of image intrinsic sizes. */
/* A single light shade preserves the original dusk photograph. Keep contrast
   local to the reading field; do not stack the legacy full-width vignette. */
html:root body.portal.topics-redesigned .editorial-hero{
 --topic-hero-shade:linear-gradient(90deg,rgba(5,10,22,.30),rgba(5,10,22,.14) 40%,transparent 72%);
 background-image:var(--topic-hero-shade),url('/static/_optimized/xuemo-translators-comments-hero-20260826.png.webp')!important;
 background-position:center!important;box-shadow:none!important;
}
html:root body.portal.topics-redesigned .editorial-hero::after{content:none!important;display:none!important}
html:root body.portal.topics-redesigned .editorial-hero h1{
 color:#fff8ec!important;text-shadow:0 1px 4px rgba(5,10,22,.28)!important;
}
html:root body.portal.topics-redesigned .editorial-hero p{
 color:#fff8ec!important;text-shadow:0 1px 3px rgba(5,10,22,.28)!important;
}
html:root body.portal.topics-redesigned .editorial-hero .editorial-kicker{
 color:#f2dcb2!important;text-shadow:0 1px 3px rgba(5,10,22,.28)!important;
}
@media(min-width:901px){
 html:root body.portal.topics-redesigned .editorial-hero>:is(h1,p,.editorial-kicker){max-width:min(620px,54%)!important}
 html[dir="rtl"]:root body.portal.topics-redesigned .editorial-hero{
  --topic-hero-shade:linear-gradient(270deg,rgba(5,10,22,.42),rgba(5,10,22,.36) 44%,transparent 70%);
  justify-content:flex-start!important;padding-top:128px!important;
 }
}
@media(max-width:900px){
 html:root body.portal.topics-redesigned .editorial-hero{
  --topic-hero-shade:linear-gradient(0deg,rgba(5,10,22,.48),rgba(5,10,22,.22) 36%,transparent 72%);
  background-position:22% center!important;
 }
}
body.topics-redesigned{--topic-ink:#18243a;--topic-muted:#616675;--topic-line:#dcd6ca;--topic-paper:#f8f5ee}
body.topics-redesigned .editorial-body{max-width:1328px!important;margin:auto!important;padding:60px 40px 96px!important}
body.topics-redesigned .editorial-grid{display:block!important}
body.topics-redesigned .editorial-aside{display:none}
.topics-redesigned .topic-directory{width:100%;min-width:0;color:var(--topic-ink)}
.topics-redesigned .topic-introduction{display:flex;justify-content:space-between;gap:32px;align-items:end;margin:0 0 32px}
body.topics-redesigned .topic-introduction h2{font-size:clamp(28px,3.1vw,42px)!important;line-height:1.3!important;margin:12px 0 0!important;letter-spacing:-.02em!important}
body.topics-redesigned .topic-overline{font:500 12px/1.5 var(--sans)!important;letter-spacing:.08em!important;color:#90602f!important;margin:0!important}
.topics-redesigned .topic-total{display:flex;align-items:baseline;gap:12px;white-space:nowrap}
.topics-redesigned .topic-total b{font:500 64px/1 Georgia,serif;letter-spacing:-.05em}
.topics-redesigned .topic-total span{font:14px/1.5 var(--sans);color:var(--topic-muted)}
.topics-redesigned .topic-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-block:1px solid var(--topic-line);margin-bottom:28px}
.topics-redesigned .topic-index a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;color:var(--topic-ink);border-inline-end:1px solid var(--topic-line);font:500 17px/1.5 var(--sans)}
.topics-redesigned .topic-index a:first-child{padding-inline-start:0}
.topics-redesigned .topic-index a:last-child{border:0}
.topics-redesigned .topic-index b{font:14px Georgia,serif;color:#91622e}
.topics-redesigned .topic-index a:hover{color:#91622e;background:#f1eadf}
.topics-redesigned .topic-index a[aria-current=page]{background:#efe9dc;box-shadow:inset 0 -2px #a37a3d}
.topics-redesigned .topic-directory--detail .topic-filters{grid-template-columns:minmax(0,1fr) auto}
.topics-redesigned .topic-directory--detail .topic-search-label{grid-column:1}
.topics-redesigned .topic-directory--detail .topic-filters button{grid-column:2}
.topics-redesigned .topic-filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,270px) auto;gap:12px;margin-bottom:60px;align-items:stretch}
.topics-redesigned .topic-search-label{display:block;min-width:0}
.topics-redesigned .topic-filters input,.topics-redesigned .topic-filters select,.topics-redesigned .topic-filters button{width:100%;min-width:0;background:#fffdf9;border:1px solid var(--topic-line);border-radius:3px;min-height:48px;padding:10px 16px;font:14px/1.5 var(--sans);color:var(--topic-ink)}
.topics-redesigned .topic-filters input:focus,.topics-redesigned .topic-filters select:focus{outline:2px solid #ad8850;outline-offset:2px}
.topics-redesigned .topic-filters button{cursor:pointer;width:auto;background:transparent}
.topics-redesigned .topic-section{margin:0 0 88px;scroll-margin-top:115px}
.topics-redesigned .topic-section-heading{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:22px;border-bottom:1px solid var(--topic-ink);padding:0 0 22px;margin:0 0 38px;position:static}
body.topics-redesigned .topic-section-heading h2{font:600 clamp(32px,4vw,48px)/1.25 var(--serif)!important;margin:0!important;letter-spacing:-.025em!important;text-align:start!important;color:var(--topic-ink)!important}
.topics-redesigned .topic-number{font:20px Georgia,serif;color:#9f773f}
.topics-redesigned .topic-section-count{font:13px/1.5 var(--sans);color:var(--topic-muted);text-align:end}
.topics-redesigned .topic-subsection{margin:0 0 48px}
body.topics-redesigned .topic-subsection-title{font:600 25px/1.45 var(--serif)!important;margin:0 0 24px!important;color:var(--topic-ink)!important;border:0!important;padding:0!important}
body.topics-redesigned .topic-subheading{font:500 14px/1.5 var(--sans)!important;color:#8b6335!important;margin:0 0 18px!important;padding:0!important}
.topics-redesigned .topic-group+.topic-group{margin-top:30px}
.topics-redesigned .topic-books-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;align-items:start}
.topics-redesigned .topic-book{min-width:0;display:flex;flex-direction:column;background:#fffdf9;border:1px solid var(--topic-line);border-radius:4px;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.topics-redesigned .topic-book:hover{border-color:#b8a78a;box-shadow:0 12px 28px #2730410a}
.topics-redesigned .topic-book-visual{display:flex;align-items:center;justify-content:center;flex:0 0 260px;height:260px;min-height:0;min-width:0;padding:22px;background:#f0ece3;border-bottom:1px solid #e4dfd4;overflow:hidden}
.topics-redesigned .topic-book-visual img{display:block;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;min-width:0;min-height:0;object-fit:contain!important;box-shadow:0 9px 16px #17223318}
.topics-redesigned .topic-book-copy{display:flex;flex-direction:column;gap:14px;padding:24px;min-width:0}
body.topics-redesigned .topic-book h4{font:600 22px/1.45 var(--serif)!important;color:var(--topic-ink)!important;margin:0!important;letter-spacing:0!important;display:block!important;overflow:visible!important;-webkit-line-clamp:unset!important;overflow-wrap:anywhere}
.topics-redesigned .topic-book h4 a{color:inherit}
.topics-redesigned .topic-book h4 a:hover{color:#865c2c}
body.topics-redesigned .topic-book-description{font:400 15px/1.8 var(--sans)!important;color:#4e5665!important;letter-spacing:0!important;margin:0!important;text-align:start!important}
.topics-redesigned .topic-book-meta{display:flex;flex-direction:column;gap:4px;padding-top:14px;border-top:1px solid #e7e1d6;color:#707582;font:12px/1.6 var(--sans);overflow-wrap:anywhere}
.topics-redesigned .topic-book-meta span{display:block}
.topics-redesigned .topic-book-link{display:flex;justify-content:space-between;align-items:start;gap:10px;font:500 13px/1.6 var(--sans);color:#855d2f;text-decoration:underline;text-underline-offset:4px;padding-top:5px}
.topics-redesigned .topic-book--planned{padding:24px;min-height:160px;background:#f6f1e8;border-style:dashed;gap:16px;align-self:start;box-shadow:none}
.topics-redesigned .topic-book-status{font:500 11px/1.6 var(--sans);color:#85643b;letter-spacing:.02em}
.topics-redesigned .topic-book-unpictured{font:400 30px/1.3 Georgia,serif;color:#b4a184;letter-spacing:.1em}
.topics-redesigned .topic-no-results{padding:28px;background:white;border:1px solid var(--topic-line)}
.topics-redesigned [hidden]{display:none!important}
.topics-redesigned .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){body.topics-redesigned .editorial-body{max-width:1450px!important}.topics-redesigned .topic-books-grid{gap:32px}.topics-redesigned .topic-book-visual{height:280px;flex-basis:280px}}
@media(max-width:1024px){.topics-redesigned .topic-books-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topics-redesigned .topic-index a{font-size:15px;padding:16px}.topics-redesigned .topic-filters{grid-template-columns:1fr 210px}.topics-redesigned .topic-filters button{grid-column:2}}
@media(max-width:620px){body.topics-redesigned .editorial-body{padding:36px 20px 60px!important}.topics-redesigned .topic-introduction{gap:20px;align-items:start}.topics-redesigned .topic-total{display:block;text-align:end}.topics-redesigned .topic-total b{font-size:48px}.topics-redesigned .topic-total span{display:block;font-size:12px}.topics-redesigned .topic-index{display:block}.topics-redesigned .topic-index a{border-inline-end:0;border-bottom:1px solid var(--topic-line);padding:13px 0}.topics-redesigned .topic-filters{grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-bottom:40px}.topics-redesigned .topic-search-label{grid-column:1/-1}.topics-redesigned .topic-filters select{grid-column:1}.topics-redesigned .topic-filters button{grid-column:2}.topics-redesigned .topic-books-grid{grid-template-columns:minmax(0,1fr);gap:24px}.topics-redesigned .topic-section-heading{gap:12px;grid-template-columns:auto 1fr}.topics-redesigned .topic-section-count{grid-column:2;text-align:start}.topics-redesigned .topic-book-copy{padding:22px}.topics-redesigned .topic-section{margin-bottom:56px}.topics-redesigned .topic-book-visual{height:280px;flex-basis:280px}}
/* Titles remain reading anchors, with colour used for the discrete reading action. */
body.topics-redesigned .topic-directory :is(.topic-index a,.topic-book h4 a){color:var(--topic-ink)!important;text-decoration:none!important;border-bottom:0!important}
body.topics-redesigned .topic-directory :is(.topic-index a,.topic-book h4 a):hover{color:#855d2f!important;text-decoration:underline!important;text-underline-offset:5px}
@media(min-width:760px){
 .topics-redesigned .topic-books-grid--single{grid-template-columns:1fr}
 .topics-redesigned .topic-books-grid--single .topic-book:not(.topic-book--planned){display:grid;grid-template-columns:minmax(220px,30%) minmax(0,1fr);align-items:stretch}
 .topics-redesigned .topic-books-grid--single .topic-book-visual{height:100%;min-height:300px;max-height:410px;border-bottom:0;border-inline-end:1px solid #e4dfd4}
 .topics-redesigned .topic-books-grid--single .topic-book-visual img{max-height:300px!important}
 .topics-redesigned .topic-books-grid--single .topic-book-copy{padding:32px;max-width:750px}
}