.blog-main { border-top:1px solid var(--line); }
.blog-hero { padding:76px 0 58px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:72px; align-items:end; }
.blog-hero h1 { max-width:740px; font-size:clamp(50px,5.6vw,74px); line-height:1.02; }
.blog-hero .lead { max-width:420px; padding-bottom:6px; font-size:20px; line-height:1.55; }
.blog-list { padding:0 0 105px; }
.article-stack { border-top:1px solid var(--line); }
.article-row { position:relative; display:grid; grid-template-columns:76px minmax(0,1fr) 32px; gap:28px; align-items:center; padding:34px 2px; border-bottom:1px solid var(--line); color:var(--ink); transition:background-color .16s ease; }
.article-row:hover { background:#fafaf7; }
.article-row:focus-visible { outline:3px solid #d7af28; outline-offset:4px; }
.article-symbol { display:grid; place-items:center; width:68px; height:68px; }
.article-symbol img { max-width:58px; max-height:58px; object-fit:contain; }
.article-copy { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.article-meta { margin-bottom:10px; color:#77776f; font-size:12px; font-weight:780; letter-spacing:.065em; }
.article-copy strong { max-width:760px; font-size:32px; line-height:1.12; letter-spacing:-.025em; }
.article-summary { max-width:760px; margin-top:10px; color:#62635d; font-size:17px; line-height:1.55; }
.article-open { width:24px; height:24px; transition:transform .16s ease; }
.article-row:hover .article-open { transform:translate(3px,-3px); }
.article-shell { width:min(860px,calc(100% - 64px)); margin-inline:auto; }
.article-head { padding:75px 0 58px; border-bottom:1px solid var(--line); }
.article-back { display:inline-flex; align-items:center; gap:8px; margin-bottom:46px; color:#66675f; font-size:15px; font-weight:700; }
.article-head h1 { font-size:clamp(46px,6vw,70px); max-width:820px; }
.article-deck { margin-top:24px; max-width:700px; font-size:21px; line-height:1.55; }
.article-byline { display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:30px; color:#77776f; font-size:14px; font-weight:650; }
.article-body { padding:58px 0 100px; }
.article-body h2 { margin:54px 0 18px; font-size:34px; }
.article-body h2:first-child { margin-top:0; }
.article-body h3 { margin:32px 0 12px; font-size:24px; }
.article-body p,.article-body li { font-size:19px; line-height:1.75; }
.article-body p+p { margin-top:20px; }
.article-body ul,.article-body ol { margin:20px 0 26px; padding-left:25px; }
.article-body li+li { margin-top:9px; }
.article-callout { margin:38px 0; padding:25px 27px; border:1px solid #e1d69d; border-radius:12px; background:#fffbed; }
.article-callout strong { display:block; margin-bottom:5px; }
.article-callout p { font-size:17px; }
.article-steps { list-style:none; padding:0!important; counter-reset:steps; }
.article-steps li { position:relative; padding:22px 22px 22px 67px; border-top:1px solid var(--line); counter-increment:steps; }
.article-steps li:last-child { border-bottom:1px solid var(--line); }
.article-steps li:before { content:counter(steps,decimal-leading-zero); position:absolute; left:13px; top:23px; font-size:14px; font-weight:800; color:#77776f; }
.article-end { margin-top:62px; padding:32px; display:flex; align-items:center; justify-content:space-between; gap:25px; border-radius:14px; background:var(--ivory); }
.article-end h2 { margin:0 0 7px; font-size:27px; }
.article-end p { font-size:16px; }
@media(max-width:900px){
  .blog-hero { grid-template-columns:1fr; gap:22px; padding-top:56px; }
  .article-copy strong { font-size:29px; }
}
@media(max-width:600px){
  .blog-hero { padding:42px 0 36px; gap:17px; }
  .blog-hero h1 { font-size:39px; line-height:1.04; }
  .blog-hero .lead { font-size:17px; }
  .blog-list { padding-bottom:68px; }
  .article-row { grid-template-columns:50px minmax(0,1fr); gap:16px; padding:26px 30px 26px 0; }
  .article-symbol { width:48px; height:48px; }
  .article-symbol img { max-width:44px; max-height:44px; }
  .article-meta { margin-bottom:8px; font-size:11px; line-height:1.45; }
  .article-copy strong { font-size:24px; line-height:1.15; }
  .article-summary { margin-top:8px; font-size:15px; }
  .article-open { position:absolute; top:28px; right:1px; width:20px; height:20px; }
  .article-shell { width:calc(100% - 32px); }
  .article-head { padding:43px 0 42px; }
  .article-back { margin-bottom:32px; }
  .article-head h1 { font-size:36px; line-height:1.08; }
  .article-deck { font-size:18px; }
  .article-body { padding:42px 0 72px; }
  .article-body h2 { font-size:29px; margin-top:44px; }
  .article-body p,.article-body li { font-size:17px; }
  .article-end { align-items:flex-start; flex-direction:column; padding:25px; }
}