.blog-page { --page-accent: var(--ybag-blue, #1268c4); color: var(--ink); background: var(--paper); }
.blog-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,420px); gap: clamp(44px,7vw,90px); width: min(calc(100% - 48px), var(--ybag-frame, 1380px)); margin: 38px auto 0; border: 1px solid var(--line); border-radius: 28px; padding: clamp(48px,7vw,82px); align-items: center; background: linear-gradient(135deg,var(--panel) 0 64%,#edf6ff 64%); box-shadow: var(--ybag-shadow); }
.blog-hero h1 { max-width: 760px; margin: 0; color: var(--brand-dark); font-size: clamp(40px,4.2vw,58px); line-height: 1.02; letter-spacing: -.032em; }
.blog-hero-copy > p:not(.ybag-page-signal) { max-width: 700px; color: var(--muted); font-size: 19px; line-height: 1.7; }
.blog-index { width: min(calc(100% - 48px), 1320px); margin: 0 auto; padding: 42px 0 88px; }
.blog-section-heading { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 30px; align-items: end; padding-bottom: 28px; border-bottom: 2px solid var(--brand-dark); }
.blog-section-heading h2 { max-width: 760px; margin: 0; color: var(--brand-dark); font-size: clamp(36px,4.5vw,54px); line-height: 1.04; }
.blog-article-list { border-bottom: 1px solid var(--line); }
.blog-article-row { display: grid; grid-template-columns: 60px minmax(0,1fr) auto; gap: 26px; align-items: center; padding: 31px 0; border-bottom: 1px solid var(--line); }
.blog-article-number { color: var(--ybag-pink, #e93078); font-weight: 900; }
.blog-date { margin: 0 0 5px; color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.blog-article-row h3 { margin: 0; font-size: 27px; line-height: 1.12; }
.blog-article-row h3 a, .blog-read-link { color: var(--brand-dark); font-weight: 900; text-decoration: none; }
.blog-article-row p:last-child { max-width: 760px; margin: 8px 0 0; color: var(--muted); line-height: 1.6; }
.blog-empty { padding: 48px 0; }
.blog-article { width: min(900px,calc(100% - 48px)); margin: 0 auto; padding: 72px 0 84px; }
.blog-article header { padding-bottom: 36px; border-bottom: 2px solid var(--brand-dark); }
.blog-article h1 { margin: 10px 0 20px; color: var(--brand-dark); font-size: clamp(40px,5vw,58px); line-height: 1.04; }
.blog-article-summary { color: var(--muted); font-size: 20px; line-height: 1.65; }
.blog-article-meta { display: flex; justify-content: space-between; gap: 20px; margin-top: 28px; color: var(--muted); font-weight: 700; }
.blog-article-meta a { color: var(--brand-dark); }
.blog-article-body { padding-top: 42px; color: var(--ink); font-size: 18px; line-height: 1.85; }
.blog-related { padding: 54px max(7vw,24px) 68px; color: var(--ink); background: var(--panel-alt); }
.blog-related > p,.blog-related > h2,.blog-related > div { max-width: 1320px; margin-right: auto; margin-left: auto; }
.blog-related h2 { margin-top: 0; color: var(--brand-dark); font-size: 40px; }
.blog-related > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.blog-related a { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 18px; padding: 24px; color: var(--brand-dark); background: var(--panel); text-decoration: none; }
.blog-related a span { color: var(--muted); font-size: 12px; }
@media(max-width:800px){.blog-hero{grid-template-columns:1fr}.blog-section-heading{grid-template-columns:1fr}.blog-related>div{grid-template-columns:1fr}}
@media(max-width:620px){.blog-hero,.blog-index{width:min(calc(100% - 30px),1320px)}.blog-hero{margin-top:14px;padding:36px 24px}.blog-hero h1{font-size:40px}.blog-article-row{grid-template-columns:40px minmax(0,1fr)}.blog-read-link{grid-column:2}.blog-article{width:calc(100% - 30px);padding:52px 0 64px}.blog-article-meta{align-items:flex-start;flex-direction:column}.blog-related{padding:42px 15px 54px}}