.topic-crumbs { padding: 22px 0 0; font-size: 12px; color: var(--stone,#a49b8e); }
.topic-crumbs a { margin-right: 10px; }
.topic-hero { padding: 48px 0 36px; }
.topic-hero h1 { max-width: 24ch; font-size: clamp(28px,4vw,48px); }
.page-hero .topic-status { margin-top: 24px; }
.topic-intro { max-width: 760px; font-size: 18px; line-height: 1.8; color: #c5b9ae; }
.topic-status { border-left: 3px solid var(--red,#d93632); padding: 13px 18px; background: #251d1b; margin: 24px 0; font-size: 14px; }
.topic-layout { display: grid; grid-template-columns: minmax(0,850px) minmax(180px,1fr); gap: 64px; padding-bottom: 70px; }
.topic-body { min-width: 0; font-size: 16px; line-height: 1.85; }
.topic-body h2 { margin: 46px 0 18px; font-size: clamp(21px,3vw,28px); line-height: 1.4; }
.topic-body h3 { margin: 25px 0 12px; font-size: 18px; line-height: 1.5; }
.topic-body ul,.topic-body ol { padding-left: 24px; }
.topic-body li { margin: 10px 0; }
.topic-body figure { margin: 28px 0; display: flex; align-items: center; gap: 24px; padding: 24px; border: 1px solid #403532; border-radius: 8px; background: #1b1817; }
.topic-body figure img { width: 120px; height: 120px; flex: none; border-radius: 50%; object-fit: cover; }
.topic-body figcaption { color: #b9afa3; font-size: 14px; }
.topic-nav { position: sticky; top: 110px; align-self: start; padding-top: 30px; }
.topic-nav a { display: block; font-size: 13px; line-height: 1.5; padding: 9px 0; }
.topic-next { padding: 26px; margin-top: 40px; border: 1px solid #403532; border-radius: 8px; background: #1b1817; }
.topic-next h2 { margin-top: 0; }
.topic-related { display: flex; gap: 12px 24px; flex-wrap: wrap; margin: 20px 0; }
@media(max-width:850px) { .topic-layout { grid-template-columns: minmax(0,1fr); gap: 20px; } .topic-nav { position: static; grid-row: 1; display: flex; flex-wrap: wrap; gap: 0 18px; padding: 0; } .topic-body { font-size: 15px; } }
@media(max-width:480px) { .topic-body figure { padding: 16px; gap: 14px; } .topic-body figure img { width: 72px; height: 72px; } .topic-body figcaption { font-size: 12px; } }

.topic-body .topic-illustration { display: block; padding: 0; margin: 30px 0 8px; border-radius: 4px; overflow: hidden; }
.topic-body .topic-illustration img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; }
.topic-body .topic-illustration figcaption { padding: 16px 20px; font-size: 13px; line-height: 1.65; }
.topic-table-wrap { max-width: 100%; overflow-x: auto; margin: 24px 0; border: 1px solid #403532; border-radius: 4px; }
.topic-table-wrap:focus-visible { outline: 2px solid var(--red,#d93632); outline-offset: 4px; }
.topic-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 1.65; }
.topic-table caption { padding: 14px 18px; text-align: left; color: var(--stone,#a49b8e); font-size: 12px; }
.topic-table th,.topic-table td { padding: 15px 18px; text-align: left; vertical-align: top; border-top: 1px solid #403532; }
.topic-table thead { background: #332b29; }
.topic-table th { font-weight: 700; color: #f2ede3; }
.topic-table tbody th { width: 22%; }
.topic-table tbody tr:nth-child(even) { background: #1b1817; }
.topic-stars { min-width: 510px; }
.topic-stars tbody th { width: auto; color: var(--red,#d93632); white-space: nowrap; }
.topic-note { margin: 24px 0; padding: 18px 22px; border-left: 3px solid var(--red,#d93632); background: #251d1b; font-size: 15px; line-height: 1.8; }
.topic-note strong { color: #f2ede3; }
.topic-body .topic-steps { padding-left: 25px; }
.topic-steps li { padding-left: 8px; margin: 18px 0; }
.topic-steps li::marker { color: var(--red,#d93632); font-weight: 700; }
.topic-rules { margin: 24px 0; }
.topic-rules > div { display: grid; grid-template-columns: minmax(150px,1fr) minmax(0,2fr); gap: 25px; padding: 22px 0; border-top: 1px solid #403532; }
.topic-rules > div:last-child { border-bottom: 1px solid #403532; }
.topic-rules dt { font-weight: 700; line-height: 1.6; color: #f2ede3; }
.topic-rules dd { margin: 0; }
.topic-decisions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 24px 0; }
.topic-decisions article { min-width: 0; padding: 21px; border-top: 2px solid var(--red,#d93632); background: #1b1817; }
.topic-body .topic-decisions h3 { margin: 14px 0; font-size: 17px; line-height: 1.6; }
.topic-decisions p { font-size: 14px; line-height: 1.8; }
.topic-decisions .topic-label { margin: 0; color: var(--stone,#a49b8e); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.topic-body code { overflow-wrap: anywhere; }
@media(max-width:640px) {
  .topic-rules > div { grid-template-columns: 1fr; gap: 8px; }
  .topic-decisions { grid-template-columns: 1fr; }
  .topic-decisions article { padding: 20px; }
  .topic-body .topic-decisions h3 { margin: 8px 0; }
  .topic-decisions p { font-size: 15px; }
  .topic-note { padding: 16px 18px; }
  .topic-table th,.topic-table td { padding: 12px 14px; }
}