/* Blog and measured-result articles share the website's typography and palette. */
.blog-intro { padding-block:38px 28px; }
.blog-intro h1 { font-size:clamp(32px,3.2vw,42px); font-weight:600; line-height:1.3; letter-spacing:-.025em; }
.blog-intro p { color:var(--dim); margin-top:12px; }
.blog-feature { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:36px; align-items:center; padding-bottom:48px; }
.blog-feature-image img,.blog-story-image img { display:block; width:100%; height:auto; border-radius:10px; }
.blog-kicker { color:#ffb77e; font-size:12px; margin-bottom:10px; }
.blog-feature h2 { font-size:clamp(24px,2.4vw,32px); font-weight:550; line-height:1.45; margin-bottom:14px; }
.blog-feature-copy > p:not(.blog-kicker),.blog-story-copy > p:not(.blog-kicker) { color:var(--dim); }
.blog-meta { font-size:13px; color:var(--dim); margin-block:16px; }
.blog-stories { padding-block:12px 44px; }
.blog-stories > h2 { font-size:24px; font-weight:550; margin-bottom:24px; }
.blog-story { display:grid; grid-template-columns:280px minmax(0,1fr); gap:28px; max-width:1040px; }
.blog-story h3 { font-size:24px; font-weight:550; line-height:1.45; margin-bottom:10px; }
.blog-article { width:100%; max-width:920px; padding:32px var(--page-gutter) 48px; margin-inline:auto; }
.blog-article h1 { font-size:clamp(28px,3.2vw,40px); line-height:1.4; font-weight:600; letter-spacing:-.025em; }
.blog-back { display:inline-flex; align-items:center; min-height:44px; margin-bottom:20px; color:var(--dim); font-size:14px; }
.blog-lead { color:var(--dim); font-size:17px; line-height:1.85; margin-top:18px; }
.blog-article h2 { font-size:26px; font-weight:550; line-height:1.4; margin:36px 0 14px; }
.blog-article p { margin-bottom:16px; }
.blog-article figure { margin:24px 0; }
.blog-article figcaption { color:var(--dim); font-size:13px; margin-top:10px; }
.blog-language-note { font-size:13px; color:var(--dim); margin-bottom:18px; }
.blog-language-note[hidden] { display:none; }
.blog-compare { min-width:0; }
.blog-compare-frame { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.blog-compare-frame img { display:block; width:100%; height:auto; }
.blog-compare-reference { min-width:0; }
.blog-compare:not(.is-ready) .blog-compare-reference { grid-column:1; grid-row:1; }
.blog-compare:not(.is-ready) .blog-compare-render { grid-column:2; grid-row:1; }
.blog-compare.is-ready .blog-compare-frame { display:block; position:relative; overflow:hidden; border-radius:8px; }
.blog-compare.is-ready .blog-compare-reference { position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--compare-position,50%)) 0 0); }
.blog-compare.is-ready .blog-compare-reference img { width:100%; height:100%; }
.blog-compare-divider { display:none; }
.blog-compare.is-ready .blog-compare-divider { display:block; position:absolute; inset-block:0; left:var(--compare-position,50%); width:2px; background:#fff; transform:translateX(-50%); pointer-events:none; }
.blog-compare-handle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:2px solid #fff; border-radius:50%; background:#101216e8; color:#fff; font-size:24px; line-height:1; }
.blog-compare-slider { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; touch-action:pan-y; cursor:ew-resize; }
.blog-compare-frame:has(.blog-compare-slider:focus-visible) { outline:2px solid #ffb77e; outline-offset:4px; }
.blog-compare-labels { display:flex; justify-content:space-between; gap:20px; }
.blog-compare-status:empty { display:none; }
.blog-view-caption { color:var(--dim); font-size:13px; }
.blog-view-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:20px; }
.blog-view-links img { display:block; width:100%; height:auto; border-radius:6px; }
.blog-view-links span { display:block; font-size:13px; margin-top:9px; color:var(--dim); }
.blog-view-links a[aria-current="true"] img { outline:2px solid #ffb77e; outline-offset:3px; }
.blog-view-links a[aria-current="true"] span { color:#ffb77e; }
.blog-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.blog-detail-grid figure { margin-block:8px; }
.blog-compare.is-ready.blog-compare-detail .blog-compare-frame { aspect-ratio:979/545; }
.blog-compare.is-ready.blog-compare-detail img { width:100%; height:100%; transform:scale(2); transform-origin:var(--compare-origin); }
.blog-source-note { color:var(--dim); font-size:13px; line-height:1.8; }
.blog-source-note a { color:#ffb77e; text-decoration:underline; text-underline-offset:3px; }
.blog-table { width:100%; border-collapse:collapse; font-size:14px; margin-block:24px; }
.blog-table caption { text-align:left; font-size:13px; color:var(--dim); padding-bottom:14px; line-height:1.7; }
.blog-table th,.blog-table td { text-align:right; padding:15px 8px; border-bottom:1px solid var(--line); }
.blog-table th { font-weight:500; }
.blog-table th:first-child { text-align:left; padding-left:0; }
.blog-table thead { color:var(--dim); }
.blog-paper-reference { background:#ffffff05; }
.blog-paper-reference > th { padding-left:10px !important; }
.blog-delta { display:block; margin-top:5px; color:#a0d6b3; font-size:12px; }
.blog-table td { font-variant-numeric:tabular-nums; }
.blog-range-table td { font-size:13px; color:#a0d6b3; }
.blog-range-value { white-space:nowrap; }
.blog-test-details { margin-block:24px; }
.blog-test-details summary { min-height:44px; padding-block:10px; color:#d3d8df; }
.blog-test-details dl { display:grid; grid-template-columns:100px minmax(0,1fr); gap:12px 20px; margin-top:16px; font-size:14px; }
.blog-test-details dt { color:var(--dim); }
.blog-test-details dd { margin:0; }
.home-blog { padding-block:32px 44px; }
.home-blog-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.home-blog-heading h2 { font-size:30px; font-weight:550; }
.home-blog-items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.home-blog-items img { display:block; width:100%; height:auto; aspect-ratio:979/545; border-radius:8px; }
.home-blog-items h3 { font-size:23px; font-weight:550; line-height:1.5; margin:16px 0 10px; }
.home-blog-items p { color:var(--dim); font-size:15px; }
@media(max-width:760px) {
  .blog-feature { grid-template-columns:1fr; gap:24px; padding-bottom:32px; }
  .blog-story { grid-template-columns:1fr; gap:20px; }
  .blog-story-image { max-width:460px; }
  .blog-detail-grid { grid-template-columns:1fr; gap:16px; }
  .home-blog-items { grid-template-columns:1fr; gap:32px; }
  .home-blog-heading { align-items:start; flex-wrap:wrap; gap:12px; }
  .blog-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .blog-table tbody { display:block; }
  .blog-table tr { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 8px; padding:16px 0; border-bottom:1px solid var(--line); }
  .blog-table th { grid-column:1/-1; padding:0 !important; border:0; }
  .blog-table td { padding:0; border:0; text-align:left; }
  .blog-table td::before { content:attr(data-label); display:block; color:var(--dim); font-size:12px; margin-bottom:6px; }
  .blog-paper-reference { padding-inline:10px !important; }
  .blog-range-value { display:block; }
  .blog-view-links { gap:12px; }
  .blog-test-details dl { grid-template-columns:80px minmax(0,1fr); gap:10px 16px; }
  .blog-spread-table tr { grid-template-columns:1fr; }
}