#detail-body { overflow-wrap:anywhere; min-width:0; }
#detail-body .archive-photo { margin:1rem 0; }
#detail-body .archive-photo img { display:block; width:auto; height:auto; max-width:100%; max-height:75vh; object-fit:contain; }
#detail-body figcaption { margin:.5rem 0; color:var(--muted,#bbb); font-size:.87em; line-height:1.7; }
#detail-body .archive-video { display:block; width:fit-content; max-width:100%; margin:1rem 0; text-decoration:underline; }
#detail-body .archive-video img { display:block; width:min(100%,480px); height:auto; margin-bottom:.4rem; }

.archive-row { grid-template-columns:110px minmax(0,1fr); }
.archive-row.with-photo { grid-template-columns:110px 108px minmax(0,1fr); }
.archive-row .archive-preview { align-self:center; }
.archive-preview img { width:100%; height:auto; max-height:110px; object-fit:contain; }
#detail-links:empty { margin:0; }
@media (max-width:800px) {
  .archive-row { grid-template-columns:7.5ch minmax(0,1fr); column-gap:8px; }
  .archive-row time { white-space:nowrap; font-size:11px; }
  .archive-row > div { grid-area:auto; min-width:0; overflow-wrap:anywhere; }
  .archive-row.with-photo { grid-template-columns:66px clamp(48px,15vw,76px) minmax(0,1fr); }
  .archive-row .tags { flex-wrap:wrap; }
}
#detail-featured { margin: .75rem 0 1rem; }
#detail-featured img { display:block; width:auto; max-width:100%; height:auto; max-height:75vh; object-fit:contain; }

#detail-body a { text-decoration:underline; text-underline-offset:.15em; }

.archive-x-post { max-width:550px; min-width:0; margin:1rem 0; white-space:normal; }
.archive-x-post iframe { max-width:100%; }

#detail-featured .featured-video { display:block; position:relative; width:fit-content; max-width:100%; }
.featured-video::before, .featured-video::after { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; }
.featured-video::before { width:3.6rem; height:2.6rem; background:rgba(0,0,0,.78); border:1px solid #fff; border-radius:.55rem; }
.featured-video::after { width:0; height:0; border-block:.52rem solid transparent; border-left:.9rem solid white; }

#detail-body.rich-body { white-space:normal; }
#detail-body.rich-body p, #detail-body.rich-body blockquote { margin:0 0 1em; }
#detail-body.rich-body img { width:auto; height:auto; max-width:100%; max-height:75vh; object-fit:contain; }
#detail-body.rich-body pre { white-space:pre-wrap; overflow-wrap:anywhere; }

.archive-row h2 a { color:inherit; font:inherit; }
.archive-row h2 a:hover { text-decoration:underline; text-underline-offset:5px; }