/* Cast and writer comments / 1.2.5 */
.comment-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 24px;
  min-height: 46px; min-width: 170px; padding: 9px 20px;
  border: 1px solid #d3af76; color: #f6dfb8; background: #09082355;
  font: 15px/1.6 var(--sans); letter-spacing: .12em;
  transition: background .2s, color .2s;
}
.comment-button .icon { width: 18px; height: 18px; }
.comment-button:hover { background: #f6dfb8; color: var(--navy); }
.comment-button:focus-visible { outline: 2px solid #ffe0a4; outline-offset: 4px; }
.writer-comment { text-align: center; margin-top: 20px; }
.writer-comment:empty { display: none; }
.comment-dialog {
  width: 760px; max-width: calc(100% - 32px); max-height: calc(100dvh - 48px);
  margin: auto; border: 1px solid #b49362; background: var(--white); overflow: hidden;
}
.comment-dialog[open] { display: flex; flex-direction: column; animation: comment-enter .2s ease-out; }
.comment-dialog__top { flex: 0 0 auto; align-items: center; padding: 22px 32px; border-top: 4px solid #b49362; }
.comment-dialog__eyebrow { font: 12px/1.5 var(--sans); letter-spacing: .2em; color: var(--gold); margin-bottom: 8px; }
.comment-dialog__role { font: 13px/1.5 var(--sans); color: var(--muted); margin-bottom: 5px; }
.comment-dialog__top h2 { font: 500 28px/1.4 var(--serif); letter-spacing: .1em; }
.comment-dialog__close { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; min-width: 52px; min-height: 52px; color: var(--red); flex: 0 0 auto; font: 12px/1.5 var(--sans); }
.comment-dialog__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 26px 36px 32px; text-align: left; font: 17px/2.05 var(--sans); letter-spacing: .025em; overflow-wrap: anywhere; }
.comment-dialog__body > p { margin: 0 0 1.5em; }
.comment-dialog__bottom-close { display: block; min-width: 140px; min-height: 46px; margin: 24px auto 0; padding: 8px 20px; border: 1px solid #b49362; color: var(--red); font: 15px/1.6 var(--sans); }
.comment-dialog__close:hover, .comment-dialog__bottom-close:hover { background: var(--cream); }
@keyframes comment-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 767px) {
  .comment-dialog { max-width: calc(100% - 24px); max-height: calc(100dvh - 32px); }
  .comment-dialog__top { padding: 16px 20px; gap: 12px; }
  .comment-dialog__top h2 { font-size: 25px; }
  .comment-dialog__body { padding: 22px 22px 26px; font-size: 16px; line-height: 2; }
}
@media (prefers-reduced-motion: reduce) { .comment-dialog[open] { animation: none; }.comment-button { transition: none; } }