/* A small shoreline guestbook, shared with the bookshop's blue and cream palette. */
.comment-section{margin-top:60px;padding-top:34px;border-top:1px solid var(--line)}
.comment-channel{display:flex;flex-wrap:wrap;align-items:center;gap:9px;letter-spacing:.1em;font-size:10px}
.comment-channel:before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:#77bcd9}
.comment-channel [lang]{font-size:9px;letter-spacing:.16em}
.comments-heading-line{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:15px 0 8px}
.comments-heading h2{font-size:27px;font-weight:500;line-height:1.5;margin:0}
.comments-heading-line>span{color:var(--muted);font-size:12px;white-space:nowrap}
.comment-letters{margin:10px 0 28px}
.shore-comment{display:flex;gap:16px;padding:25px 0;border-bottom:1px solid var(--line)}
.comment-avatar{width:52px;height:52px;flex:none;border-radius:50%;object-fit:contain;background:#edf7fc}
.comment-letter{min-width:0;flex:1}
.comment-byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.comment-byline h3{font-size:14px;font-weight:600;line-height:1.7;overflow-wrap:anywhere}
.comment-serial{margin-left:3px;font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;color:#7996a8}
.comment-you,.comment-pending{font-size:10px;line-height:1.6;color:#557e94;background:#e9f5fa;border-radius:4px;padding:1px 5px}
.comment-pending{background:#fff8dd;color:#817346}
.comment-message{font-size:14px;line-height:1.95;margin:10px 0 12px;white-space:pre-wrap;overflow-wrap:anywhere;color:#476076}
.comment-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.comment-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 15px;font-size:10px;line-height:1.7;color:var(--muted)}
.comment-meta>span{display:inline-flex;align-items:center;gap:4px}
.comment-meta svg{width:12px;height:12px}
.comment-like{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:48px;height:34px;border-radius:20px;color:#7d98ab;font-size:11px;transition:background .18s,color .18s}
.comment-like svg{width:16px;height:16px}
.comment-like:hover,.comment-like[aria-pressed="true"]{color:#467f9c;background:#e6f3fa}
.comment-like[aria-pressed="true"] svg{fill:#b7dfea}
.comments-empty{padding:26px 0 12px;font-size:13px;line-height:1.8;color:var(--muted)}
.shore-composer{display:block;position:relative;margin-top:24px;padding:26px;background:linear-gradient(135deg,#f0f8fc,#f9fcff 75%);border:1px solid #dfedf4;border-radius:18px}
.composer-identity{display:flex;align-items:center;gap:15px;margin-bottom:23px}
.composer-avatar{width:56px;height:56px;background:white;box-shadow:0 0 0 5px #fff9}
.composer-name{min-width:0;flex:1}
.composer-name>label{display:block;font-size:10px;letter-spacing:.08em;color:#72899c;margin-bottom:7px}
.comment-name-line{display:flex;align-items:center;flex-wrap:wrap;gap:7px 10px}
.comment-name-line input{padding:4px 0;width:min(180px,100%);min-width:0;border:0;border-bottom:1px solid #bed5e2;background:transparent;color:var(--ink);font-size:15px;font-weight:600;border-radius:0}
.composer-serial{font-size:10px;color:#7c98a9;font-variant-numeric:tabular-nums;white-space:nowrap}
.comment-avatar-picker{border:0;padding:0;margin:0 0 23px;min-width:0}
.comment-avatar-picker legend,.composer-message-label{padding:0;margin-bottom:12px;font-size:11px;color:#688397}
.comment-avatar-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;max-width:420px}
.comment-avatar-choice{position:relative;display:flex;align-items:center;flex-direction:column;gap:7px;cursor:pointer;border-radius:50%}
.comment-avatar-choice input{position:absolute;opacity:0;width:1px;height:1px}
.comment-avatar-choice img{width:43px;height:43px;border:2px solid transparent;box-shadow:0 0 0 2px transparent;transition:box-shadow .2s,transform .2s}
.comment-avatar-choice span{font-size:9px;color:#7a92a2;white-space:nowrap}
.comment-avatar-choice input:checked+img{box-shadow:0 0 0 2px #72aac5;border-color:white}
.comment-avatar-choice input:focus-visible+img{outline:2px solid var(--blue);outline-offset:5px}
.comment-avatar-choice:hover img{transform:translateY(-2px)}
.comment-avatar-choice input:checked~span{color:#315e78}
.composer-message-label{display:block}
.composer-writing{border:1px solid #dae8f0;border-radius:11px;background:#ffffffc4;overflow:hidden}
.composer-writing:focus-within{border-color:#91bad1;box-shadow:0 0 0 3px #8cc2dc16}
.composer-writing textarea{display:block;width:100%;min-height:140px;padding:15px 16px 6px;background:none;border:0;resize:vertical;color:var(--ink);font-size:14px;line-height:1.85;outline:0}
.composer-writing textarea::placeholder{color:#99aeba}
.comment-character-count{display:block;text-align:right;padding:4px 12px 10px;color:#93a6b4;font-size:10px;font-variant-numeric:tabular-nums}
.composer-bottom{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-top:17px}
.composer-guidance{padding-bottom:8px;flex:1;min-width:0}
.comment-city-preview{display:flex;align-items:center;gap:5px;font-size:11px;color:#5b7c92;margin-bottom:10px}
.comment-city-preview svg{width:13px;height:13px}
.composer-guidance p{font-size:10px;color:#8b9dab;line-height:1.9}
.comment-whale-submit{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 6px 6px;border-radius:15px}
.comment-submit-art{display:block;width:124px;height:104px}
.comment-submit-art>svg,.comment-submit-art>img{width:100%;height:100%;object-fit:contain}
.comment-submit-caption{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;color:#386e8b}
.comment-submit-caption>span{font-size:16px;transition:transform .2s}
.comment-whale-submit:is(:hover,:focus-visible) .comment-submit-caption>span{transform:translateX(3px)}
.comment-form-status{font-size:12px;color:#46748b;line-height:1.8}
.comment-form-status:not(:empty){padding-top:16px}
@media(max-width:760px){
  .comment-section{margin-top:44px}
  .comments-heading h2{font-size:23px}
  .shore-composer{padding:20px}
  .shore-comment{gap:12px}
  .shore-comment>.comment-avatar{width:42px;height:42px}
  .comment-avatar-options{gap:10px 6px}
}
@media(max-width:430px){
  .comments-heading-line{gap:8px;flex-wrap:wrap}
  .comments-heading h2{font-size:22px}
  .shore-composer{padding:18px 15px}
  .comment-avatar-options{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:17px;max-width:250px}
  .composer-avatar{width:44px;height:44px}
  .composer-identity{gap:12px}
  .composer-bottom{align-items:start;flex-wrap:wrap}
  .composer-guidance{flex-basis:100%}
  .comment-whale-submit{margin-left:auto}
  .comment-message{font-size:13px}
  .comment-foot{gap:5px}
  .comment-meta{gap:3px;flex-direction:column;align-items:start}
}
@media(prefers-reduced-motion:reduce){.comment-avatar-choice img,.comment-like,.comment-submit-caption>span{transition:none}}
:root[data-motion="reduced"] .comment-avatar-choice img,:root[data-motion="reduced"] .comment-like,:root[data-motion="reduced"] .comment-submit-caption>span{transition:none}