.blog-hero .page-hero-card { position: relative; overflow: hidden; }
.blog-hero .page-hero-card::after { content: "Aa"; position: absolute; right: 18px; top: 8px; color: rgba(143,135,220,.12); font-family: Georgia, serif; font-size: 72px; font-weight: 700; }
.blog-search { padding: 42px 0; border-bottom: 1px solid var(--line); background: #fff; }
.blog-search label { display: grid; max-width: 760px; gap: 9px; margin-inline: auto; }
.blog-search label span { color: var(--navy); font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.blog-search input { width: 100%; min-height: 58px; padding: 0 20px; border: 1px solid #cbc7e4; border-radius: 16px; color: var(--ink); background: #faf9fd; outline: none; }
.blog-search input:focus { border-color: var(--lavender); box-shadow: 0 0 0 4px rgba(143,135,220,.14); }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.blog-card { display: grid; grid-template-columns: .72fr 1.28fr; min-height: 330px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: #fff; transition: transform .24s, box-shadow .24s, border-color .24s; }
.blog-card[hidden] { display: none; }
.blog-card:hover { transform: translateY(-5px); border-color: #cbc7e4; box-shadow: var(--shadow); }
.blog-card.featured-post { grid-column: 1 / -1; grid-template-columns: .86fr 1.14fr; min-height: 400px; }
.blog-card-visual { position: relative; display: flex; min-height: 100%; flex-direction: column; justify-content: flex-end; padding: 28px; overflow: hidden; color: var(--navy); background: linear-gradient(145deg, #d9f3eb, #e9e7fa 56%, #f7dfd3); }
.blog-card-visual::before, .blog-card-visual::after { content: ""; position: absolute; border: 1px solid rgba(20,33,63,.16); border-radius: 50%; }
.blog-card-visual::before { width: 290px; height: 290px; right: -140px; top: -120px; box-shadow: 0 0 0 45px rgba(255,255,255,.14), 0 0 0 90px rgba(255,255,255,.08); }
.blog-card-visual::after { width: 120px; height: 120px; left: -55px; bottom: -45px; }
.blog-card-visual span, .blog-card-visual strong, .blog-card-visual i { position: relative; z-index: 1; }
.blog-card-visual span { margin-bottom: auto; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.blog-card-visual strong { max-width: 240px; font-family: Georgia, serif; font-size: clamp(27px, 3vw, 39px); line-height: 1.05; }
.blog-card-visual i { position: absolute; right: 25px; bottom: 20px; color: rgba(20,33,63,.22); font-size: 25px; font-style: normal; }
.blog-card-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 32px; }
.blog-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.blog-meta span:first-child { color: #6760ad; }
.blog-card h2 { margin: 24px 0 16px; font-family: Georgia, serif; font-size: clamp(25px, 2.3vw, 34px); font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
.blog-card h2 a:hover { color: #6760ad; }
.blog-card-copy > p { color: var(--muted); font-size: 13px; }
.blog-card-copy .text-link { margin-top: auto; color: var(--navy); font-size: 12px; }
.blog-empty { grid-column: 1 / -1; padding: 25px; border-radius: 16px; color: var(--muted); background: #f5f3fb; text-align: center; }

.post-hero { position: relative; padding: 155px 0 88px; overflow: hidden; background: linear-gradient(135deg, #fbfaf7, #f0eefb 58%, #eaf8f3); }
.post-hero::after { content: ""; position: absolute; width: 480px; height: 480px; right: -230px; top: -210px; border: 1px solid rgba(143,135,220,.27); border-radius: 50%; box-shadow: 0 0 0 65px rgba(143,135,220,.035), 0 0 0 130px rgba(143,135,220,.02); }
.post-hero-inner { position: relative; z-index: 1; max-width: 980px; }
.post-hero h1 { max-width: 950px; margin-bottom: 30px; font-size: clamp(46px, 6vw, 76px); }
.post-meta { display: flex; flex-wrap: wrap; gap: 9px 24px; color: var(--muted); font-size: 11px; font-weight: 800; }
.post-meta span + time, .post-meta time + span { position: relative; }
.post-meta span + time::before, .post-meta time + span::before { content: "•"; position: absolute; left: -15px; color: var(--lavender); }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 85px; align-items: start; padding-top: 88px; padding-bottom: 105px; }
.blog-prose { max-width: 780px; color: #46556f; font-family: Georgia, "Times New Roman", serif; font-size: 19px; line-height: 1.95; }
.blog-prose > p:first-child { color: var(--navy); font-size: 24px; line-height: 1.7; }
.blog-prose h2 { margin: 60px 0 24px; font-size: 40px; }
.blog-prose h3 { margin: 44px 0 18px; font-size: 27px; }
.blog-prose p { margin-bottom: 27px; }
.blog-prose ul, .blog-prose ol { margin: 25px 0 32px; padding-left: 28px; }
.blog-prose li + li { margin-top: 9px; }
.blog-prose a { color: #5f58a1; text-decoration: underline; text-underline-offset: 3px; }
.blog-prose blockquote { margin: 40px 0; padding: 25px 30px; border-left: 4px solid var(--mint-deep); color: var(--navy); background: #eff8f5; font-size: 22px; font-style: italic; }
.blog-prose hr { margin: 50px 0; border: 0; border-top: 1px solid var(--line); }
.post-end-note { display: grid; grid-template-columns: auto 1fr; gap: 17px; margin-top: 55px; padding: 25px; border-radius: 18px; background: #f2f0fb; }
.post-end-note > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: var(--navy); background: var(--mint); }
.post-end-note p { margin: 0; color: var(--muted); font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 13px; line-height: 1.7; }
.post-end-note strong { color: var(--navy); }
.post-aside { position: sticky; top: 120px; padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, #fff, #f5f3fc); box-shadow: 0 20px 50px rgba(20,33,63,.08); }
.post-aside h2 { margin: 20px 0 13px; font-size: 29px; }
.post-aside p { color: var(--muted); font-size: 12px; }
.post-aside .button { width: 100%; margin-top: 12px; }
.aside-back-link { display: block; margin-top: 22px; color: #6760ad; font-size: 11px; font-weight: 800; text-align: center; }

@media (max-width: 980px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card, .blog-card.featured-post { grid-column: auto; grid-template-columns: .7fr 1.3fr; }
  .post-layout { grid-template-columns: 1fr; gap: 50px; }
  .post-aside { position: static; max-width: 620px; }
}

@media (max-width: 640px) {
  .blog-search { padding: 30px 0; }
  .blog-card, .blog-card.featured-post { grid-template-columns: 1fr; }
  .blog-card-visual { min-height: 250px; }
  .blog-card-copy { padding: 25px 22px; }
  .blog-card h2 { font-size: 27px; }
  .post-hero { padding: 125px 0 66px; }
  .post-hero h1 { font-size: 43px; }
  .post-meta span + time::before, .post-meta time + span::before { display: none; }
  .post-layout { padding-top: 58px; padding-bottom: 72px; }
  .blog-prose { font-size: 17px; line-height: 1.85; }
  .blog-prose > p:first-child { font-size: 21px; }
  .blog-prose h2 { font-size: 34px; }
  .post-end-note { grid-template-columns: 1fr; }
}