/* ─── /loot/ : an imageboard on paper. Yotsuba bones, readable body. ─── */
:root { --paper: #ffffee; --post: #f0e0d6; --post-line: #d9bfb7; --ink: #800000; --name: #117743; --subject: #cc1105; --mono: 'JetBrains Mono', ui-monospace, monospace; --ui: Arial, Helvetica, sans-serif; --serif: Georgia, 'Times New Roman', serif; }
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 13px/1.4 var(--ui); -webkit-font-smoothing: antialiased; }
a { color: #34345c; }
a:hover { color: #dd0000; }
.board { max-width: 900px; margin: 0 auto; padding: 6px 12px 60px; }
.board__nav { font-size: 11px; color: #89a; padding: 4px 0; }
.board__nav b { color: var(--ink); }
.board__head { text-align: center; margin: 22px 0 10px; }
.board__brand { display: inline-block; }
.board__logo { width: 300px; max-width: 80vw; height: auto; }
.board__head h1 { font: 700 28px/1.1 Tahoma, var(--ui); color: #af0a0f; letter-spacing: -1px; margin: 8px 0 4px; }
.board__sub { font-size: 12px; color: #34345c; }
.board__rule { border: 0; border-top: 1px solid #d9bfb7; margin: 12px 0; }
.thread { margin: 10px 0; }
.post { margin: 4px 0; }
.post--op { padding: 0 4px; }
.post--reply { display: inline-block; background: var(--post); border: 1px solid var(--post-line); border-left: 0; border-top: 0; padding: 6px 10px; margin: 8px 0 8px 22px; max-width: 100%; }
.post__info { font-size: 12px; margin-bottom: 8px; }
.post__info > * { margin-right: 6px; }
.post__subject { color: var(--subject); font-weight: 700; font-size: 14px; }
.post__name { color: var(--name); font-weight: 700; }
.post__trip { color: #228854; margin-left: -6px; }
.post__no { color: var(--ink); }
.post__reply { font-size: 11px; }
.post__body { max-width: 720px; font-family: var(--serif); font-size: clamp(17px, 2vw, 19px); line-height: 1.55; color: #3b0000; padding: 6px 0 6px 6px; }
.post__body p { margin: 0 0 1.15em; }
.post__punch { font-family: var(--ui); font-weight: 900; font-size: 1.25em; line-height: 1.15; color: var(--ink); margin: 1.2em 0 !important; }
.post__body--small { font: 13px/1.5 var(--ui); color: var(--ink); padding: 0; max-width: none; }
.quote { color: #d00; text-decoration: underline; }
.green { color: #789922; }
.board__foot { display: flex; align-items: center; gap: 18px; padding: 8px 4px 0; font-family: var(--serif); font-style: italic; font-size: 15px; color: #3b0000; }
.board__foot b { display: block; font-style: normal; font-family: var(--ui); font-weight: 900; font-size: 20px; letter-spacing: -.03em; margin-top: 2px; }
.board__foot small { display: block; margin-top: 10px; font: 400 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #89a; font-style: normal; }
.board__foot small a { color: #34345c; text-decoration: none; }
.board__seal { width: 84px; filter: invert(1) contrast(1.15); transform: rotate(-4deg); opacity: .9; }
@media (max-width: 600px) { .board { padding: 4px 8px 40px; } .board__head h1 { font-size: 22px; } .post__body { font-size: 16.5px; padding-left: 2px; } .post--reply { margin-left: 8px; } }
/* like: a small red heart with a count, once per reader */
.like { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 2px 8px; border: 1px solid #d9bfb7; background: #f0e0d6; color: #800000; font: 12px/1 var(--ui); cursor: pointer; border-radius: 3px; vertical-align: middle; }
.like:hover { border-color: #800000; }
.like__heart { color: #b8b8b8; font-size: 13px; transition: transform .15s, color .15s; }
.like.is-liked { cursor: default; }
.like.is-liked .like__heart { color: #dd0000; transform: scale(1.25); }
/* OP image, 4chan style: the file line, then the picture floated left of the post */
.post__file { font-family: var(--ui); font-size: 12px; color: #707070; margin: 4px 0 4px 6px; }
.post__file a { color: #34345c; }
.post__img { float: left; margin: 2px 18px 10px 6px; }
.post__img img { display: block; width: 220px; height: 220px; object-fit: cover; box-shadow: 0 0 0 1px #d9bfb7; }
.post__h { clear: none; font-family: var(--ui); font-weight: 900; font-size: 1.05em; color: #af0a0f; margin: 1.6em 0 .4em; letter-spacing: -.01em; }
.post__list { clear: both; font-family: var(--ui); font-weight: 700; padding-left: 1.6em; margin: .6em 0 1em; }
.post__list a { color: #34345c; }
.post__sign { font-family: var(--ui); font-weight: 900; color: #117743; margin-top: 1.4em !important; }
.thread::after { content: ''; display: block; clear: both; }
@media (max-width: 600px) { .post__img { float: none; margin: 4px 0 10px 2px; } .post__img img { width: 160px; height: 160px; } }
/* pictures between paragraphs, 4chan-sized, floated right; green caption like a greentext */
.post__fig { float: right; width: 240px; margin: .3em 0 .8em 1.4em; }
.post__fig img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px #d9bfb7; }
.post__fig--clear img { box-shadow: none; }
.post__fig figcaption { font-family: var(--ui); font-size: 12px; color: #789922; margin-top: 4px; }
.post__h { clear: both; }
@media (max-width: 600px) { .post__fig { float: none; width: 70%; margin: .6em auto 1em; } }
.board__banner { display: block; width: 150px; height: auto; margin: 10px auto 6px; }
.board__seal--grin { width: 120px !important; height: auto !important; }
.seals { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; }
.seals img, .seals canvas { width: 84px; height: 84px; object-fit: contain; display: block; }
.seals .seals__grin { width: 120px; }