/* Board: requests, notes and questions from visitors (data from /api/greetings). */
.bd-story { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center; max-width: 720px; margin: 40px 0 0; padding: 16px; border: 1px solid var(--line); border-radius: 22px; text-decoration: none; background: var(--panel); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.bd-story:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .35); }
.bd-story img { width: 120px; height: 150px; object-fit: cover; border-radius: 14px; display: block; }
.bd-story-t { display: grid; gap: 6px; }
.bd-story-t small { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gray); }
.bd-story-t b { font-size: 22px; font-weight: 300; letter-spacing: -0.02em; direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .bd-story-t b { text-align: right; }
.bd-story-t span { font-size: 14.5px; line-height: 1.55; color: var(--gray); }
.bd-story-t em { font-style: normal; font-size: 14px; font-weight: 500; color: var(--ink); }
@media (max-width: 560px) { .bd-story { grid-template-columns: 84px 1fr; gap: 14px; } .bd-story img { width: 84px; height: 105px; } .bd-story-t b { font-size: 18px; } }
.bd-stats { display: flex; gap: 40px; flex-wrap: wrap; margin: 36px 0 0; color: var(--gray); font-size: 13px; }
.bd-stats b { display: block; font-size: 40px; font-weight: 200; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.bd-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 44px 0 24px; }
.bd-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.bd-filters button { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--gray); transition: color .2s, border-color .2s; }
.bd-filters button.on { border-color: var(--ink); color: var(--ink); }
.bd-write { background: var(--ink); color: #fff; border-radius: 999px; padding: 10px 20px; font-size: 14px; }
.bd-write:hover { opacity: .85; }
.bd-wall { columns: 3 280px; column-gap: 18px; }
.bd-g { break-inside: avoid; display: grid; gap: 12px; margin: 0 0 18px; padding: 20px 20px 16px; border: 1px solid var(--line); border-radius: 18px; background: #fff; animation: bd-pop .5s var(--ease) both; }
.bd-g.req { background: var(--ink); border-color: var(--ink); color: #fff; }
.bd-g p { margin: 0; font-size: 20px; font-weight: 300; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.bd-g footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: var(--gray); }
.bd-g.req footer { color: rgba(255, 255, 255, .62); }
.bd-g footer b { font-weight: 500; color: inherit; }
.bd-kind { justify-self: start; border: 1px solid currentColor; border-radius: 999px; padding: 1px 9px; font-size: 10.5px; font-weight: 500; letter-spacing: .22em; opacity: .85; }
.bd-del { font-size: 12px; color: inherit; opacity: .7; padding: 2px 6px; }
.bd-del:hover { opacity: 1; }
.bd-empty, .bd-note { color: var(--gray); }
.bd-empty { text-align: center; padding: 40px 0; column-span: all; }
.bd-note { font-size: 13px; margin: 0 0 18px; }
@keyframes bd-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bd-g { animation: none; } }
@media (max-width: 560px) { .bd-stats { gap: 24px; } .bd-stats b { font-size: 32px; } .bd-g p { font-size: 18px; } }