:root { --bg: #F6F8FB; --card: #FFFFFF; --ink: #0B1220; --ink2: #5E6B80; --line: #E6EAF0; --link: #0F56C4; --tint: #EDF4FF; --warn-bg: #FFF4E5; --warn-ink: #7A4100; --warn-line: #F2C185; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--link); }
a:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.wrap { max-width: 40rem; margin: 0 auto; padding: 1rem; }
header.site { display: flex; align-items: center; padding: 0.5rem 0 1rem; }
header.site a { color: var(--ink); font-weight: 800; text-decoration: none; letter-spacing: -0.01em; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.25rem; }
.card + .card { margin-top: 0.75rem; }
.who { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.who > div:not(.avatar) { flex: 1 1 8rem; min-width: 0; }
.avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; background: var(--tint); }
.initials { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.5rem; color: var(--link); }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink2); margin: 0 0 0.5rem; }
.meta { color: var(--ink2); margin: 0.15rem 0 0; overflow-wrap: anywhere; }
.badge { display: inline-block; font-size: 0.8rem; font-weight: 700; color: var(--link); background: var(--tint); border-radius: 999px; padding: 0.1rem 0.6rem; margin-top: 0.35rem; }
ul.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
ul.chips li { border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.7rem; overflow-wrap: anywhere; }
ul.plain { margin: 0; padding-left: 1.2rem; }
p { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.note { color: var(--ink2); }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
a.button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; max-width: 100%; min-height: 44px; padding: 0.4rem 1.1rem; text-align: center; overflow-wrap: anywhere; border-radius: 999px; border: 1px solid var(--link); color: var(--link); font-weight: 700; text-decoration: none; }
@media (max-width: 15rem) { .wrap { padding: 0.5rem; } .card { padding: 0.75rem; } a.button { padding: 0.4rem 0.75rem; } }
a.button:first-child { background: var(--link); color: #FFFFFF; }
footer.site { color: var(--ink2); font-size: 0.875rem; padding: 1.5rem 0 2rem; }
footer.site nav.legal { margin-top: 0.35rem; }
.card.legal p + p, .card p + ul.plain, .card p + p { margin-top: 0.6rem; }
ul.plain li + li { margin-top: 0.35rem; }
.draft { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); border-radius: 12px; padding: 0.6rem 0.8rem; margin: 0.6rem 0; }