/* ============================================================
   «Тёплый день» — блог. Светлая тема, сезонность, текстура дуба.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Manrope:wght@400;500;600;700;800&display=swap');

@property --accent{ syntax: '<color>'; inherits: true; initial-value: #1F7A8C; }
@property --accent2{ syntax: '<color>'; inherits: true; initial-value: #E9A13B; }
@property --tint{ syntax: '<color>'; inherits: true; initial-value: rgba(244,216,168,.30); }body.blog * { box-sizing: border-box; margin: 0; padding: 0; }html { scroll-behavior: smooth; }body.blog {
  background: #FFFBF5;
  color: #3B2C20;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100vh;
  transition: --accent 2.5s ease, --accent2 2.5s ease, --tint 2.5s ease;
}body.blog /* --- Сезонные палитры --- */
body.blog[data-season="summer"] { --accent:#1F7A8C; --accent2:#E9A13B; --tint:rgba(244,216,168,.30); }body.blog[data-season="autumn"] { --accent:#B4551F; --accent2:#8C2F1B; --tint:rgba(226,170,104,.28); }body.blog[data-season="winter"] { --accent:#3E6C8E; --accent2:#9E2B3B; --tint:rgba(198,216,229,.38); }body.blog[data-season="spring"] { --accent:#C9718C; --accent2:#6E9E62; --tint:rgba(248,214,224,.34); }body.blog /* --- Сезонный слой (SVG-декорации, body.blog кроссфейд 2.5с) --- */
.season-layer { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }body.blog .season-wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 85% -10%, var(--tint), transparent 60%),
    radial-gradient(100% 60% at 0% 110%, var(--tint), transparent 55%);
  transition: --tint 2.5s ease;
}body.blog .season-set { position: absolute; inset: 0; opacity: 0; transition: opacity 2.5s ease; }body.blog .season-set.active { opacity: 1; }body.blog .season-set svg { position: absolute; display: block; }body.blog .season-set .s-float { animation: sFloat 9s ease-in-out infinite; }body.blog .season-set .s-float2 { animation: sFloat 12s ease-in-out infinite reverse; }
@keyframes sFloat{ 0%,100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-14px) rotate(2deg); } }body.blog /* --- Каркас --- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); position: relative; z-index: 2; }body.blog .site-head {
  position: sticky; top: 12px; z-index: 60;
  margin: 12px clamp(10px, 2vw, 24px) 0;
  border-radius: 22px;
  background: rgba(255,253,248,.07);
  backdrop-filter: blur(12px) saturate(1.5); -webkit-backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(30,70,95,.10),
    0 12px 34px rgba(30,70,95,.14);
}body.blog /* Градиентная рамка «срез стекла»: сверху яркая, body.blog по бокам прозрачнее */
.site-head::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.35) 30%, rgba(255,255,255,.22) 70%, rgba(255,255,255,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}body.blog /* Кольцо усиленного искажения к краям — эффект загнутого стекла */
.site-head::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
  -webkit-mask: radial-gradient(130% 190% at 50% 50%, transparent 55%, #000 88%);
  mask: radial-gradient(130% 190% at 50% 50%, transparent 55%, #000 88%);
  pointer-events: none;
}body.blog .site-head .wrap { display: flex; align-items: center; gap: 14px; padding: 10px clamp(14px, 2vw, 22px); flex-wrap: wrap; max-width: none; margin: 0; }body.blog .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; margin-right: auto; }body.blog .brand svg { width: 34px; height: 34px; color: var(--accent); transition: color 2.5s ease; }body.blog .brand b { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 700; letter-spacing: .3px; }body.blog .brand small { display: block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #9B7E5F; font-family: 'Manrope'; }body.blog .main-nav { display: flex; gap: 4px; flex-wrap: wrap; }body.blog .main-nav a {
  text-decoration: none; color: #5C4632; font-weight: 600; font-size: 15px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid transparent;
  transition: color .3s, background .3s, border-color .3s;
}body.blog .main-nav a:hover { color: var(--accent); background: rgba(255,255,255,.45); border-color: rgba(255,255,255,.65); }body.blog .main-nav a.active { color: #FFFDF8; background: var(--accent); transition: background 2.5s ease, color .3s; }body.blog /* --- Герой --- */
.hero { padding: clamp(48px, 9vw, 120px) 0 clamp(28px, 5vw, 56px); position: relative; }body.blog .hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase; font-weight: 700;
  color: var(--accent); transition: color 2.5s ease;
}body.blog .hero-kicker::before { content: ""; width: 34px; height: 1px; background: var(--accent); transition: background 2.5s ease; }body.blog .hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(38px, 6.4vw, 84px); line-height: 1.06; font-weight: 700;
  margin: 18px 0 20px; max-width: 14ch;
}body.blog .hero h1 em { font-style: italic; color: var(--accent); transition: color 2.5s ease; }body.blog .hero p { max-width: 56ch; font-size: clamp(16px, 1.6vw, 19px); color: #6B5640; }body.blog .season-note {
  margin-top: 22px; font-size: 13px; color: #7A6248; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,253,248,.12); border: 1px solid rgba(255,255,255,.70);
  backdrop-filter: blur(8px) saturate(1.45); -webkit-backdrop-filter: blur(8px) saturate(1.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 6px 18px rgba(30,70,95,.10);
}body.blog .season-note svg { width: 16px; height: 16px; color: var(--accent2); transition: color 2.5s ease; }body.blog /* --- Карточки: дневной глассморфизм --- */
.card {
  position: relative;
  background: rgba(255,253,248,.10);
  backdrop-filter: blur(12px) saturate(1.45); -webkit-backdrop-filter: blur(12px) saturate(1.45);
  border: 1px solid transparent; background-clip: padding-box;
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -1px 0 rgba(30,70,95,.08),
    0 12px 34px rgba(30,70,95,.12);
  overflow: hidden;
  transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s;
}body.blog .card:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(30,70,95,.08), 0 24px 52px rgba(30,70,95,.18); }body.blog .card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,.30), rgba(255,255,255,0) 40%);
}body.blog /* Градиентная рамка + кольцо искажения «загнутого стекла» */
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.30) 30%, rgba(255,255,255,.18) 70%, rgba(255,255,255,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}body.blog .card-body { position: relative; padding: clamp(20px, 3vw, 32px); }body.blog .card-tag {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); border: 1px solid currentColor; border-radius: 999px; padding: 5px 12px;
  transition: color 2.5s ease;
}body.blog .card h3 {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
  font-size: clamp(20px, 2.2vw, 27px); line-height: 1.25; margin: 14px 0 10px;
}body.blog .card h3 a { color: inherit; text-decoration: none; }body.blog .card h3 a:hover { color: var(--accent); }body.blog .card p { color: #6B5640; font-size: 15px; }body.blog .card-meta { margin-top: 18px; display: flex; gap: 16px; font-size: 12.5px; color: #9B7E5F; font-weight: 600; letter-spacing: .04em; }body.blog /* --- Сетки --- */
.grid-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px,100%), 1fr)); gap: clamp(18px, 2.5vw, 30px); }body.blog .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr)); gap: clamp(18px, 2.5vw, 30px); }body.blog .section { padding: clamp(28px, 5vw, 64px) 0; }body.blog .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: clamp(20px, 3vw, 34px); flex-wrap: wrap; }body.blog .section-head h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; }body.blog .section-head a.more { color: var(--accent); font-weight: 700; text-decoration: none; font-size: 14px; letter-spacing: .06em; transition: color 2.5s ease; }body.blog .section-head a.more:hover { text-decoration: underline; }body.blog /* --- Чипы категорий --- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }body.blog .chip {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 14px;
  color: var(--accent); border: 1.5px solid var(--accent);
  background: rgba(255,253,248,.12);
  backdrop-filter: blur(8px) saturate(1.45); -webkit-backdrop-filter: blur(8px) saturate(1.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  transition: color 2.5s ease, border-color 2.5s ease, background .3s;
}body.blog .chip:hover, body.blog .chip.active { background: var(--accent); color: #FFFDF8; }body.blog .chip svg { width: 15px; height: 15px; }body.blog /* --- Обложки-иллюстрации постов (SVG, body.blog сезонный акцент) --- */
.cover { height: clamp(140px, 20vw, 200px); position: relative; overflow: hidden; }body.blog .cover svg { position: absolute; inset: 0; width: 100%; height: 100%; }body.blog .cover .c-band { fill: var(--accent); opacity: .14; transition: fill 2.5s ease; }body.blog .cover .c-band2 { fill: var(--accent2); opacity: .18; transition: fill 2.5s ease; }body.blog .cover .c-mark { stroke: var(--accent); fill: none; stroke-width: 3; stroke-linecap: round; opacity: .55; transition: stroke 2.5s ease; }body.blog /* --- Статья --- */
.article-hero { padding: clamp(40px, 7vw, 90px) 0 0; }body.blog .article-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(30px, 5vw, 58px); line-height: 1.12; max-width: 20ch; margin: 16px 0 18px; }body.blog .article-meta { display: flex; flex-wrap: wrap; gap: 18px; color: #9B7E5F; font-size: 13.5px; font-weight: 600; }body.blog .prose {
  position: relative;
  max-width: 780px; margin: clamp(20px, 3vw, 40px) auto;
  padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 48px);
  font-size: clamp(16px, 1.5vw, 18.5px);
  background: rgba(255,253,248,.15);
  backdrop-filter: blur(13px) saturate(1.4); -webkit-backdrop-filter: blur(13px) saturate(1.4);
  border: 1px solid transparent; background-clip: padding-box; border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(30,70,95,.08),
    0 14px 40px rgba(30,70,95,.13);
}body.blog .prose::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.32) 30%, rgba(255,255,255,.20) 70%, rgba(255,255,255,.52));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}body.blog .prose::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
  -webkit-mask: radial-gradient(130% 160% at 50% 50%, transparent 55%, #000 88%);
  mask: radial-gradient(130% 160% at 50% 50%, transparent 55%, #000 88%);
}body.blog .prose p { margin-bottom: 1.4em; color: #4A3928; }body.blog .prose h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(23px, 2.6vw, 32px); margin: 1.6em 0 .7em; }body.blog .prose blockquote {
  margin: 2em 0; padding: 20px 26px; border-left: 3px solid var(--accent);
  background: rgba(255,255,255,.22); border-radius: 0 14px 14px 0;
  font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 1.12em;
  transition: border-color 2.5s ease;
}body.blog .prose ul { margin: 0 0 1.4em 1.2em; color: #4A3928; }body.blog .prose li { margin-bottom: .5em; }body.blog .lead { font-size: 1.18em; color: #5C4632; }body.blog /* --- Формы (светлые) --- */
.field label { display: block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #9B7E5F; margin-bottom: 8px; }body.blog .field input, body.blog .field textarea {
  width: 100%; padding: 14px 16px; font: inherit; color: inherit;
  background: rgba(255,253,248,.18);
  backdrop-filter: blur(10px) saturate(1.35); -webkit-backdrop-filter: blur(10px) saturate(1.35);
  border: 1.5px solid rgba(255,255,255,.65); border-radius: 14px; outline: none;
  box-shadow: inset 0 1px 4px rgba(30,70,95,.06);
  transition: border-color .3s, box-shadow .3s;
}body.blog .field input:focus, body.blog .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(31,122,140,.10); }body.blog .btn-warm {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 14px 28px; border-radius: 999px; border: none; font: inherit; font-weight: 800; font-size: 15px;
  color: #FFFDF8; background: var(--accent); transition: background 2.5s ease, transform .3s;
}body.blog .btn-warm:hover { transform: translateY(-2px); }body.blog .btn-warm svg { width: 16px; height: 16px; }body.blog /* --- Подвал --- */
.site-foot {
  position: relative; z-index: 2; margin-top: clamp(40px, 7vw, 90px);
  background: rgba(24,42,52,.58); color: #EAD9C2;
  backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-top: 1px solid rgba(255,255,255,.22);
}body.blog .site-foot .wrap { padding-top: clamp(36px, 5vw, 64px); padding-bottom: 28px; }body.blog .foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px,100%),1fr)); gap: 30px; }body.blog .site-foot h4 { font-family: 'Playfair Display', Georgia, serif; font-size: 19px; margin-bottom: 14px; color: #FFF3E2; }body.blog .site-foot a { color: #D8C3A6; text-decoration: none; }body.blog .site-foot a:hover { color: #FFF3E2; }body.blog .foot-nav { display: grid; gap: 9px; font-size: 14.5px; }body.blog .socials { display: flex; gap: 12px; margin-top: 6px; }body.blog .socials a {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(234,217,194,.35); color: #EAD9C2;
  transition: background .35s, color .35s, transform .35s, border-color .35s;
}body.blog .socials a:hover { background: var(--accent); border-color: transparent; color: #FFFDF8; transform: translateY(-3px); }body.blog .socials svg { width: 20px; height: 20px; }body.blog .foot-bottom { margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(234,217,194,.18); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: #B39B7E; }body.blog /* --- Мелочи --- */
.page-title { padding: clamp(36px, 6vw, 72px) 0 clamp(8px, 2vw, 20px); }body.blog .page-title h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(32px, 5vw, 56px); margin-top: 14px; }body.blog .divider-leaf { display: flex; align-items: center; gap: 14px; color: var(--accent2); margin: 8px 0; transition: color 2.5s ease; }body.blog .divider-leaf::before, body.blog .divider-leaf::after { content: ""; flex: 1; height: 1px; background: rgba(120,90,60,.2); }body.blog .divider-leaf svg { width: 22px; height: 22px; }

@media (max-width: 640px){body.blog .site-head { margin: 10px 10px 0; border-radius: 18px; }body.blog .site-head .wrap { gap: 8px; padding: 9px 12px; }body.blog .brand svg { width: 30px; height: 30px; }body.blog .brand b { font-size: 18px; }body.blog .brand small { font-size: 10px; }body.blog .main-nav a { padding: 7px 10px; font-size: 13.5px; }
}
@media (min-width: 2200px){body.blog .wrap { max-width: 1600px; }
}

/* SPA: кросс-фейд контента между страницами */
body.blog main.spa-out { opacity: 0; transform: translateY(10px); transition: opacity .16s ease, transform .16s ease; }
body.blog main.spa-in { animation: spaIn .3s ease both; }
@keyframes spaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body.blog main.spa-out { transition: none; }
  body.blog main.spa-in { animation: none; }
}