/* Archived discussions: scoped so recipe and article content retain Joy styling. */
#comments.archived-discussion {
  clear: both;
  display: flow-root;
  max-width: 860px;
  margin: 2.5em 0 0;
  padding: 1.8em 0 0;
  box-sizing: border-box;
  border-top: 1px solid #d1e1d1;
  scroll-margin-top: 24px;
}
#comments .archive-discussion-header { margin-bottom: 20px; }
#comments .archive-discussion-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#comments .archive-discussion-heading h2 { margin: 0; font-size: 1.6em; line-height: 1.3; color: #2c5931; }
#comments .archive-comment-count { padding: .25em .7em; border-radius: 14px; background: #edf5eb; color: #49684b; font-size: .9em; }
#comments .archive-discussion-header > p { max-width: 65ch; margin: .7em 0 0; color: #607361; line-height: 1.6; }
#comments .archive-comment-topics { margin: 0 0 24px; padding: 16px 18px; border: 1px solid #dce7d9; border-radius: 5px; background: #f6faf3; }
#comments .archive-comment-topics > p { margin: 0 0 9px; color: #47684b; font-weight: bold; font-size: .95em; }
#comments .archive-comment-topics ul { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
#comments .archive-comment-topics li { margin: 0; padding: 0; max-width: 100%; overflow-wrap: anywhere; list-style: none; list-style-image: none; }
#comments .archive-comment-topics a { color: #38613c; text-decoration: underline; text-underline-offset: 3px; }
#comments article.archive-comment {
  box-sizing: border-box;
  float: none;
  position: relative;
  display: block;
  width: auto;
  margin: 0 0 20px;
  padding: 23px 26px;
  border: 1px solid #d5e2d2;
  border-radius: 5px;
  background: #fff;
  scroll-margin-top: 24px;
}
#comments .archive-comment-header { margin-bottom: 17px; }
#comments .archive-comment-header h3 { margin: 0 0 9px; color: #2f5d34; font-size: 1.4em; font-weight: normal; line-height: 1.35; overflow-wrap: anywhere; }
#comments .archive-comment-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: #6b7a69; font-size: .92em; line-height: 1.6; }
#comments .archive-comment-meta p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
#comments .archive-comment-author { font-weight: bold; color: #4b644a; }
#comments .archive-comment-permalink { flex: none; color: #617b61; text-decoration: underline; text-underline-offset: 3px; }
#comments .archive-comment-body { max-width: 78ch; color: #345a37; font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
#comments .archive-comment-body > :first-child { margin-top: 0; }
#comments .archive-comment-body > :last-child { margin-bottom: 0; }
#comments .archive-comment-body p { margin: 0 0 1.3em; line-height: inherit; }
#comments .archive-comment-body li { margin-bottom: .45em; }
#comments .archive-comment-body a { color: #b2412e; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#comments .archive-comment-body a:hover { color: #773021; }
#comments .archive-comment-body img { max-width: 100%; height: auto; }
#comments .archive-comment-subheading { display: inline-block; color: #3b603c; font-size: .9em; font-weight: bold; letter-spacing: .04em; margin-bottom: .3em; }
#comments article.archive-comment--reply { margin-left: 30px; border-left: 3px solid #adc7aa; background: #fbfdf9; }
#comments .archive-comment-context { overflow-wrap: anywhere; margin: 0 0 15px; padding-bottom: 12px; border-bottom: 1px solid #e3ebe0; color: #6a7e67; font-size: .92em; line-height: 1.6; }
#comments .archive-comment-context a { color: #47684a; text-decoration: underline; text-underline-offset: 3px; }
#comments article.archive-comment:target { border-color: #c18b55; box-shadow: 0 0 0 2px #f5e5cf; }
#comments a:focus-visible { outline: 3px solid #477c49; outline-offset: 3px; border-radius: 2px; }
@media (max-width: 600px) {
  #comments.archived-discussion { margin-top: 2em; padding-top: 1.5em; }
  #comments .archive-discussion-heading { gap: 9px; }
  #comments .archive-discussion-heading h2 { font-size: 1.45em; }
  #comments .archive-comment-topics { padding: 14px; }
  #comments .archive-comment-topics ul { gap: 10px 16px; }
  #comments article.archive-comment { padding: 18px 17px; margin-bottom: 16px; }
  #comments .archive-comment-header h3 { font-size: 1.3em; }
  #comments .archive-comment-meta { flex-wrap: wrap; gap: 5px 12px; }
  #comments .archive-comment-body { font-size: 14px; line-height: 1.75; }
  #comments article.archive-comment--reply { margin-left: 12px; }
}