/* Field notes uses the established marketing tokens; no blog JavaScript. */
.blog-home { padding-block: clamp(48px, 7vw, 100px) clamp(72px, 9vw, 128px); }
.blog-home__head { margin-bottom: clamp(40px, 6vw, 72px); }
.blog-home__intro { color: var(--ink-2); margin-bottom: 16px; }
.blog-home h1 { font-size: clamp(52px, 8vw, 96px); letter-spacing: -.04em; line-height: 1.05; }
.blog-home h1 span { color: var(--primary-ink); }
.blog-home__description { margin-top: 24px; color: var(--ink-2); font-size: clamp(20px, 2.5vw, 28px); line-height: 1.45; max-width: 38ch; }
.blog-topic { color: var(--primary-ink); font-weight: 600; font-size: 15px; }
.blog-meta { color: var(--ink-2); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.blog-featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding-block: 32px 48px; border-block: 1px solid var(--border-2); }
.blog-featured:not(:has(.blog-featured__image)) { grid-template-columns: 1fr; max-width: 850px; }
.blog-featured__image { display: block; overflow: hidden; border-radius: var(--r-card); background: var(--surface); }
.blog-featured__image img { width: 100%; height: auto; aspect-ratio: 1200/630; object-fit: contain; }
.blog-featured h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.15; margin-block: 12px 20px; }
.blog-featured h2 a, .blog-list h3 a { color: var(--ink); text-decoration: none; }
.blog-featured h2 a:hover, .blog-list h3 a:hover { color: var(--primary-ink); text-decoration: underline; }
.blog-featured__copy > p:not(.blog-topic) { color: var(--ink-2); }
.blog-featured .blog-meta { margin-top: 20px; }
.blog-read { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; margin-top: 20px; font-weight: 600; }
.blog-more { margin-top: 56px; }
.blog-more > h2 { font-size: 26px; margin-bottom: 24px; }
.blog-list { list-style: none; margin: 0; padding: 0; }
.blog-list__item { display: flex; gap: 32px; align-items: center; padding-block: 32px; border-bottom: 1px solid var(--border); }
.blog-list__image { flex: 0 0 200px; overflow: hidden; border-radius: 10px; background: var(--surface); }
.blog-list__image img { width: 100%; height: auto; aspect-ratio: 1200/630; object-fit: contain; }
.blog-list__copy { min-width: 0; max-width: 68ch; }
.blog-list h3 { font-size: clamp(23px, 2.4vw, 30px); line-height: 1.2; margin-block: 8px 12px; }
.blog-list__copy > p:not(.blog-topic) { color: var(--ink-2); }
.blog-list .blog-meta { margin-top: 12px; }
.blog-empty { display: flex; gap: 28px; padding: clamp(28px, 4vw, 48px); background: var(--surface); border-radius: var(--r-panel); }
.blog-empty > img { flex: 0 0 56px; align-self: flex-start; }
.blog-empty h2 { font-size: clamp(25px, 3vw, 34px); max-width: 28ch; }
.blog-empty p { color: var(--ink-2); max-width: 59ch; margin-block: 16px; }
.blog-empty a { display: inline-block; padding-block: 10px; }
.blog-article { padding-block: 32px 96px; }
.blog-breadcrumbs { display: flex; gap: 14px; align-items: center; margin-bottom: 48px; font-size: 15px; }
.blog-breadcrumbs a { padding-block: 10px; }
.blog-breadcrumbs span { color: var(--ink-2); }
.blog-article__head { max-width: 940px; margin-inline: auto; }
.blog-article h1 { font-size: clamp(34px, 5vw, 64px); line-height: 1.1; letter-spacing: -.03em; margin-block: 16px 24px; overflow-wrap: anywhere; }
.blog-article__standfirst { font-size: clamp(19px, 2vw, 23px); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.blog-article__head .blog-meta { margin-block: 24px 40px; }
.blog-article__figure { max-width: 940px; margin: 0 auto 48px; }
.blog-article__figure img { width: 100%; height: auto; max-height: 660px; object-fit: contain; background: var(--surface); border-radius: var(--r-card); }
.blog-article figcaption { font-size: 15px; color: var(--ink-2); margin-top: 14px; }
.blog-prose, .blog-article__foot { max-width: 68ch; margin-inline: auto; }
.blog-prose { font-size: 18px; line-height: 1.75; overflow-wrap: anywhere; }
.blog-prose > * + * { margin-top: 24px; }
.blog-prose h2 { font-size: clamp(27px, 3vw, 34px); line-height: 1.2; margin-top: 48px; scroll-margin-top: 100px; }
.blog-prose h3 { font-size: 23px; line-height: 1.3; margin-top: 32px; }
.blog-prose p { text-wrap: pretty; }
.blog-prose ul, .blog-prose ol { padding-left: 1.4em; }
.blog-prose li + li { margin-top: 12px; }
.blog-prose figure { margin-block: 40px; }
.blog-screens { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }
.blog-screens figure { margin:0; }
.blog-screens a { display:block; }
.blog-screens img { display:block; width:100%; height:auto; border:1px solid var(--border-2); }
.blog-prose .blog-screen { max-width:360px; margin-inline:auto; }
.blog-screen img { display:block; width:100%; }
.blog-video-description { color:var(--ink-2); font-size:15px; line-height:1.6; }
.blog-watch { margin-block:48px; }
.blog-watch video { display:block; width:100%; max-width:390px; height:auto; margin:24px auto 0; border-radius:12px; background:var(--surface); }
.blog-prose img { height: auto; border-radius: 10px; margin-inline: auto; }
.blog-prose blockquote { margin: 32px 0; padding: 24px; background: var(--surface); border-radius: 12px; }
.blog-example { margin-block: 32px; padding: clamp(20px, 4vw, 32px); border-left: 3px solid var(--primary-ink); background: var(--surface); }
.blog-example__label { color: var(--primary-ink); font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.blog-example p + p { margin-top: 16px; }
.blog-example dl { margin: 0; }
.blog-example dl > div { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--border); }
.blog-example dl > div:last-child { border: 0; }
.blog-example dt { color: var(--ink-2); font-size: 15px; }
.blog-example dd { margin: 0; }
.blog-prose pre { overflow: auto; padding: 20px; background: var(--surface); }
.blog-author { border-top: 1px solid var(--border); margin-top: 48px; padding-top: 24px; }
.blog-author p:first-child { font-weight: 600; }
.blog-author p + p { margin-top: 8px; color: var(--ink-2); }
.blog-cta { margin-block: 48px; padding: clamp(24px, 4vw, 40px); background: var(--surface); border-radius: var(--r-panel); }
.blog-cta h2 { font-size: clamp(25px, 3vw, 32px); }
.blog-cta p { color: var(--ink-2); margin-block: 16px 24px; }
.blog-related h2 { font-size: 26px; }
.blog-related .blog-list__image { flex-basis: 120px; }
.blog-related .blog-list h3 { font-size: 23px; }
.blog-back { display: inline-block; padding-block: 12px; margin-top: 24px; }
.blog-preview { max-width: 940px; margin: 0 auto 32px; padding: 16px 20px; background: var(--surface); border: 1px dashed var(--accent); border-radius: 10px; color: var(--ink); }
@media (max-width: 719px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-home__break { display: none; }
  .blog-list__item { gap: 20px; align-items: flex-start; }
  .blog-list__image { flex-basis: 100px; }
  .blog-list h3 { font-size: 23px; }
  .blog-empty { flex-direction: column; }
  .blog-breadcrumbs { margin-bottom: 28px; }
  .blog-related .blog-list__image { flex-basis: 80px; }
}
@media (max-width: 420px) {
  .blog-screens { grid-template-columns:1fr; gap:32px; }
  .blog-screens figure { width:100%; max-width:390px; margin-inline:auto; }
  .blog-list__item { flex-direction: column; }
  .blog-list__image, .blog-related .blog-list__image { flex-basis: auto; width: 120px; }
}