:root {
  --bg: #f3f5f8;
  --paper: #ffffff;
  --ink: #1f2430;
  --muted: #6b7280;
  --line: #e3e7ee;
  --accent: #2f6fed;
  --accent-ink: #1b4fd0;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: min(1180px, calc(100% - 28px)); margin: 0 auto; }

header.site { background: var(--paper); border-bottom: 1px solid var(--line); padding: 18px 0 12px; margin-bottom: 24px; }

/* --- логотип: эмодзи-плитки + словомарка DAYPIC.RU --- */
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-tiles { position: relative; display: inline-block; width: 78px; height: 46px; flex: none; }
.brand-tiles i {
  position: absolute; top: 2px; width: 42px; height: 42px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; font-style: normal; line-height: 1;
  border: 2px solid #fff; box-shadow: 0 6px 16px rgba(24, 39, 75, .18);
  transition: transform .15s ease;
}
.brand-tiles i:nth-child(1) { left: 0;    background: linear-gradient(145deg, #ffe6c9, #ffc98f); transform: rotate(-10deg); z-index: 3; }
.brand-tiles i:nth-child(2) { left: 18px; background: linear-gradient(145deg, #dceaff, #b9d6ff); transform: rotate(2deg);   z-index: 2; }
.brand-tiles i:nth-child(3) { left: 36px; background: linear-gradient(145deg, #e8e0ff, #cdbcff); transform: rotate(12deg);  z-index: 1; }
.brand:hover .brand-tiles i:nth-child(1) { transform: rotate(-14deg) translateY(-2px); }
.brand:hover .brand-tiles i:nth-child(3) { transform: rotate(16deg)  translateY(-2px); }
.brand-name {
  font-size: 31px; font-weight: 800; letter-spacing: .015em; line-height: 1;
  text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.brand-name b { font-weight: 800; background: linear-gradient(115deg, #2f6fed 0%, #7a4bff 60%, #d4468b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-name em { font-style: normal; font-size: .68em; font-weight: 700; color: var(--muted); letter-spacing: .08em; }
@media (max-width: 640px) {
  .brand { gap: 10px; }
  .brand-tiles { width: 62px; height: 38px; }
  .brand-tiles i { width: 34px; height: 34px; border-radius: 11px; font-size: 17px; }
  .brand-tiles i:nth-child(2) { left: 14px; }
  .brand-tiles i:nth-child(3) { left: 28px; }
  .brand-name { font-size: 23px; }
}

.tagline { margin: 10px 0 14px; color: var(--muted); font-size: 15px; }
nav.cats { display: flex; flex-wrap: wrap; gap: 8px; }
nav.cats a {
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 13px; font-size: 13px; color: var(--ink);
}
nav.cats a:hover, nav.cats a.is-on { background: var(--accent); color: #fff; border-color: var(--accent); text-decoration: none; }

h1.page-title { font-size: 28px; margin: 0 0 6px; line-height: 1.2; }
p.date { color: var(--muted); font-size: 14px; margin: 0 0 10px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 18px; margin: 22px 0 40px; }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; color: inherit; display: flex; flex-direction: column;
  box-shadow: 0 4px 16px rgba(24, 39, 75, .05); transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(24, 39, 75, .1); }
.card img { width: 100%; height: 190px; object-fit: cover; background: #eef1f6; display: block; }
.card-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 190px; background: linear-gradient(135deg, #dfe7f5, #eef2f9); color: #56637a; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; }
.card .meta { padding: 11px 13px 15px; }
.card h2 { font-size: 15px; margin: 0 0 6px; line-height: 1.35; font-weight: 600; }
.card .cat { color: var(--muted); font-size: 12px; }

/* --- верхний блок «Новые» на главной: закреп из постов с миниатюрой --- */
.fresh { margin: 6px 0 26px; padding: 18px 18px 6px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, #eef4ff 0%, #fff 72%); box-shadow: 0 4px 16px rgba(24, 39, 75, .05); }
.fresh-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.fresh-badge { display: inline-block; padding: 4px 11px; border-radius: 999px; background: linear-gradient(115deg, #2f6fed, #7a4bff); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.fresh-head p { margin: 0; color: var(--muted); font-size: 14px; }
.fresh-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding-bottom: 14px; }
.fresh-card { position: relative; display: block; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); color: inherit; box-shadow: 0 8px 20px rgba(24, 39, 75, .07); transition: transform .12s ease, box-shadow .12s ease; }
.fresh-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 14px 26px rgba(24, 39, 75, .12); }
.fresh-card img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; display: block; background: #eef1f8; }
.fresh-card h3 { margin: 0; padding: 10px 12px 13px; font-size: 15px; line-height: 1.32; font-weight: 600; color: var(--ink); }
.fresh-tag { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 3px 9px; border-radius: 999px; background: #ff7a18; color: #fff; font-size: 11px; font-weight: 700; }
@media (max-width: 900px) { .fresh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fresh { padding: 14px 14px 4px; } .fresh-head { flex-wrap: wrap; gap: 8px; } .fresh-card h3 { font-size: 14px; padding: 9px 10px 11px; } }

article.post { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 26px 26px 34px; margin: 0 auto 34px; max-width: 900px; box-shadow: 0 4px 16px rgba(24, 39, 75, .05); }article.post h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.22; }
.crumbs, article.post .date { color: var(--muted); font-size: 14px; }
.content { margin-top: 16px; font-size: 17px; }
.content h2 { font-size: 22px; margin: 26px 0 10px; }
.content h3 { font-size: 19px; margin: 22px 0 10px; }
.content p { margin: 0 0 14px; }
.content img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 0 auto 14px; }
.content ul, .content ol { margin: 0 0 14px; padding-left: 24px; }
.content li { margin: 0 0 6px; }
.content blockquote { margin: 0 0 16px; padding: 12px 16px; background: #f7f9fc; border-left: 4px solid var(--accent); border-radius: 8px; }
.content blockquote p:last-child { margin-bottom: 0; }
.content mark { background: #fff3bf; }
.content table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; display: block; overflow-x: auto; }
.content th, .content td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.content th { background: #f4f6fa; }
.content dl { margin: 0 0 14px; }
.content dt { font-weight: 600; margin-top: 8px; }
.content dd { margin: 0 0 6px 0; color: #384152; }
.content figure { margin: 0 0 16px; }
.content figcaption { color: var(--muted); font-size: 14px; margin-top: 6px; text-align: center; }

/* галерея snax-списков: просто картинки, без голосования */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 0 0 20px; }
.gallery figure.pic { margin: 0; }
.gallery figure.pic img { width: 100%; height: 260px; object-fit: cover; margin: 0; border-radius: 10px; }

.pagination { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin: 26px 0 44px; }
.page-numbers { padding: 8px 14px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--paper); font-size: 15px; }
.page-numbers.current { color: #fff; background: var(--accent); border-color: var(--accent); }
.page-numbers.dots { border: 0; background: transparent; color: var(--muted); padding: 8px 4px; }
a.page-numbers:hover { text-decoration: none; border-color: var(--accent); }

.related { margin: 0 0 30px; }
.related h2 { font-size: 20px; margin: 0 0 14px; }
.related .grid { margin: 0; }

ul.links { list-style: none; padding: 0; margin: 0 0 22px; columns: 2; column-gap: 26px; }
ul.links li { margin: 0 0 6px; break-inside: avoid; }
.empty { color: var(--muted); }

footer.site { background: var(--paper); border-top: 1px solid var(--line); padding: 22px 0 40px; color: var(--muted); font-size: 13px; margin-top: 20px; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 10px; }
footer.site .bipbap-logo { display: inline-block; vertical-align: -6px; margin-left: 6px; line-height: 0; }
footer.site .bipbap-logo img { height: 22px; width: auto; display: block; }

@media (max-width: 640px) {
  .brand { font-size: 23px; }
  article.post { padding: 18px; border-radius: 14px; }
  article.post h1 { font-size: 23px; }
  .card img, .card-noimg { height: 170px; }
  .gallery figure.pic img { height: 210px; }
  ul.links { columns: 1; }
}