.blog-page { background: #fbfaf8; color: #14202c; }
.blog-page *, .blog-page *::before, .blog-page *::after { box-sizing: border-box; }
.blog-shell { max-width: 1200px; margin: 0 auto; padding: 140px 28px 80px; }
.blog-eyebrow { display: block; color: #b64b08; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: none; }
.blog-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 38px; color: #657180; font-size: 13px; }
.blog-breadcrumb a { color: inherit; text-decoration: none; }
.blog-breadcrumb a:hover { color: #b64b08; text-decoration: underline; }
.blog-index-hero { position: relative; padding: 10px 0 42px; border-bottom: 1px solid #e5e1dc; }
.blog-index-hero h1 { max-width: 820px; margin: 15px 0 22px; font-size: clamp(36px,5.4vw,66px); line-height: 1.08; letter-spacing: -.045em; }
.blog-index-hero > p { max-width: 680px; font-size: 18px; line-height: 1.7; color: #5a6777; }
.blog-rss { display: inline-flex; gap: 8px; margin-top: 18px; color: #68727d; font-size: 13px; }
.blog-category-nav { display: flex; gap: 10px; overflow-x: auto; padding: 26px 0; scrollbar-width: thin; }
.blog-category-nav a,.blog-translations a { flex: 0 0 auto; padding: 10px 17px; border: 1px solid #e3ded7; border-radius: 24px; background: #fff; color: #465363; font-size: 14px; text-decoration: none; }
.blog-category-nav a[aria-current],.blog-translations a[aria-current] { color: #923700; border-color: #ffbe8e; background: #fff0e2; }
.blog-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 20px 0 24px; }
.blog-section-heading h2 { font-size: clamp(22px,3vw,30px); letter-spacing: -.025em; margin: 0; }
.blog-section-heading > span { color: #68727d; font-size: 13px; }
.blog-section-heading a { font-size: 14px; color: #a44006; }
.blog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.blog-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #eae5de; border-radius: 20px; transition: transform .2s,border-color .2s; }
.blog-card:hover { transform: translateY(-4px); border-color: #efb984; }
.blog-card-image { display: block; aspect-ratio: 16/10; overflow: hidden; background: #eee9e1; }
.blog-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-card-copy { display: flex; flex-direction: column; flex: 1; padding: 25px; }
.blog-card h2 { font-size: 24px; line-height: 1.25; letter-spacing: -.02em; margin: 13px 0; }
.blog-card h2 a { color: #14202c; text-decoration: none; }
.blog-card h2 a:hover { color: #ac4407; text-decoration: underline; text-underline-offset: 4px; }
.blog-card h2,.blog-card p,.blog-card-meta,.blog-toc a { overflow-wrap: anywhere; }
.blog-card p { color: #5d6a78; font-size: 15px; line-height: 1.7; margin: 0 0 24px; }
.blog-card-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 17px; border-top: 1px solid #eee; color: #697381; font-size: 12px; }
.blog-button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 48px; padding: 13px 23px; border-radius: 12px; background: #f98213; color: #161d24; font-weight: 700; font-size: 15px; text-decoration: none; }
.blog-button:hover { background: #ffb16c; color: #161d24; }
.blog-travel-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 65px; padding: 40px; background: #fff0e3; border: 1px solid #f9d5b3; border-radius: 24px; }
.blog-travel-cta h2 { font-size: 30px; letter-spacing: -.025em; margin: 10px 0; }
.blog-travel-cta p { color: #6e6256; margin: 0; }
.blog-travel-cta .blog-button { flex-shrink: 0; }
.blog-empty { padding: 65px 25px; text-align: center; max-width: 780px; margin: auto; }
.blog-empty > i { font-size: 42px; color: #d86a0d; margin-bottom: 20px; }
.blog-empty h1,.blog-empty h2 { font-size: clamp(28px,4vw,42px); line-height: 1.2; }
.blog-empty p { color: #5a6777; font-size: 17px; margin: 20px 0 30px; }
.blog-pagination { display: flex; justify-content: center; align-items: center; gap: 25px; margin: 40px 0; }
.blog-pagination a { display: inline-flex; align-items: center; min-height: 44px; color: #943b05; }
.blog-article-header { max-width: 920px; margin-bottom: 36px; }
.blog-article-header h1 { font-size: clamp(34px,4.8vw,60px); line-height: 1.12; letter-spacing: -.04em; margin: 16px 0 22px; overflow-wrap: anywhere; }
.blog-standfirst { color: #5b6877; font-size: clamp(18px,2.3vw,22px); line-height: 1.6; max-width: 850px; }
.blog-byline { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; color: #5d6877; font-size: 13px; align-items: center; }
.blog-byline a { color: #26313e; font-weight: 600; }
.blog-updated { font-size: 12px; color: #6c7580; margin-top: 9px; }
.blog-translations { display: flex; gap: 8px; margin-top: 22px; }
.blog-translations a { padding: 7px 13px; font-size: 12px; }
.blog-cover { margin: 0 0 52px; overflow: hidden; border-radius: 24px; background: #ebe6de; }
.blog-cover img { display: block; width: 100%; max-height: 610px; height: auto; object-fit: cover; }
.blog-reading-layout { display: grid; grid-template-columns: minmax(0,760px) minmax(220px,280px); gap: 64px; }
.blog-reading-main { min-width: 0; }
.blog-prose { font-size: 18px; line-height: 1.85; color: #334251; overflow-wrap: anywhere; }
.blog-prose p { margin: 0 0 24px; }
.blog-prose h2,.blog-prose h3 { color: #152332; line-height: 1.3; scroll-margin-top: 115px; letter-spacing: -.025em; }
.blog-prose h2 { font-size: 30px; margin: 44px 0 20px; }
.blog-prose h3 { font-size: 24px; margin: 30px 0 16px; }
.blog-prose a,.blog-sources a { color: #a33b02; text-decoration: underline; text-underline-offset: 4px; }
.blog-prose ul,.blog-prose ol { padding-left: 26px; margin: 0 0 25px; }
.blog-prose li { padding-left: 6px; margin: 8px 0; }
.blog-prose blockquote { margin: 28px 0; padding: 22px 26px; background: #fff2e6; border-left: 3px solid #f98a26; border-radius: 0 12px 12px 0; }
.blog-prose blockquote p { margin: 0; }
.blog-prose figure { margin: 32px 0; }
.blog-prose img { max-width: 100%; height: auto; border-radius: 16px; }
.blog-prose figcaption { color: #6c7580; font-size: 13px; line-height: 1.5; margin-top: 10px; }
.blog-prose code { font-size: .85em; background: #eeeae4; padding: 2px 5px; border-radius: 4px; }
.blog-keypoints { border: 1px solid #f0dac2; background: #fff7ee; padding: 28px; border-radius: 16px; margin-bottom: 35px; }
.blog-keypoints h2 { font-size: 23px; margin: 10px 0 15px; }
.blog-keypoints ul { padding-left: 20px; color: #465564; line-height: 1.75; margin: 0; }
.blog-keypoints li + li { margin-top: 9px; }
.blog-toc { border: 1px solid #e5dfd6; background: #fff; padding: 23px; border-radius: 16px; }
.blog-toc h2 { font-size: 16px; margin: 0 0 17px; }
.blog-toc ol { padding: 0; margin: 0; list-style: none; }
.blog-toc li { margin-top: 12px; line-height: 1.5; }
.blog-toc li.blog-toc-sub { padding-left: 13px; font-size: 13px; }
.blog-toc a { color: #5f6b78; font-size: 14px; text-decoration: none; }
.blog-toc a:hover { color: #a13e05; text-decoration: underline; }
.blog-reading-sidebar { align-self: start; position: sticky; top: 115px; }
.blog-sidebar-help { background: #eef1ec; border-radius: 16px; padding: 25px; margin-top: 23px; }
.blog-sidebar-help > i { color: #596b53; font-size: 27px; }
.blog-sidebar-help h2 { font-size: 23px; line-height: 1.25; margin: 18px 0 12px; }
.blog-sidebar-help p { font-size: 14px; line-height: 1.65; color: #63705d; margin-bottom: 22px; }
.blog-sidebar-help .blog-button { padding: 13px 15px; font-size: 13px; width: 100%; }
.blog-sources { border-top: 1px solid #e5dfd8; margin-top: 40px; padding-top: 25px; }
.blog-sources h2 { font-size: 23px; margin-bottom: 17px; }
.blog-sources li { margin: 12px 0; font-size: 15px; overflow-wrap: anywhere; }
.blog-author { display: flex; gap: 22px; margin-top: 40px; padding: 27px; background: #fff; border: 1px solid #e9e3db; border-radius: 16px; }
.blog-author-mark { display: grid; place-items: center; flex: 0 0 54px; height: 54px; border-radius: 50%; background: #fff0df; color: #a74308; font-weight: 700; }
.blog-author h2 { font-size: 21px; margin: 8px 0; }
.blog-author h2 a { color: #243342; text-decoration: none; }
.blog-author p { color: #5a6875; font-size: 15px; line-height: 1.75; margin: 0; white-space: pre-line; }
.blog-related { border-top: 1px solid #e5dfd8; padding-top: 40px; margin-top: 65px; }
.blog-preview-banner { margin-bottom: 28px; border: 1px dashed #d77b12; background: #fff5d8; padding: 18px; border-radius: 12px; font-weight: 600; }
.blog-preview-banner a { color: #873a06; text-decoration: underline; }
.blog-page a:focus-visible { outline: 3px solid #ad4e0a; outline-offset: 5px; }
/* blog-desktop-layout:start
   The shared inner-page navigation is sticky and already occupies normal flow.
   Desktop spacing is additional breathing room, not a second navbar offset.
   Keep the existing phone/tablet rules and readable mobile type unchanged. */
@media (min-width: 1024px) {
    .blog-shell { max-width: 1080px; padding: 36px 28px 64px; }
    .blog-breadcrumb { gap: 8px; margin-bottom: 20px; font-size: 12px; }
    .blog-article-header { max-width: 900px; margin-bottom: 24px; }
    .blog-article-header h1 { max-width: 900px; margin: 12px 0 16px; font-size: clamp(34px,3vw,44px); line-height: 1.16; letter-spacing: -.035em; }
    .blog-standfirst { max-width: 800px; margin: 0; font-size: 18px; line-height: 1.6; }
    .blog-byline { gap: 8px; margin-top: 18px; font-size: 12px; }
    .blog-translations { margin-top: 16px; }
    .blog-translations a { padding: 6px 12px; }
    .blog-cover { margin-bottom: 36px; border-radius: 20px; }
    .blog-cover img { height: clamp(280px,28vw,380px); max-height: 380px; object-position: 50% 58%; }
    .blog-reading-layout { grid-template-columns: minmax(0,1fr) 240px; gap: 40px; }
    .blog-prose { font-size: 17px; line-height: 1.8; }
    .blog-prose p { margin-bottom: 20px; }
    .blog-prose h2 { margin: 36px 0 16px; font-size: 26px; }
    .blog-prose h3 { margin: 26px 0 14px; font-size: 21px; }
    .blog-keypoints { padding: 24px; margin-bottom: 28px; }
    .blog-keypoints h2 { font-size: 21px; }
    .blog-toc { padding: 20px; }
    .blog-toc li { margin-top: 10px; }
    .blog-reading-sidebar { top: 96px; }
    .blog-sidebar-help { padding: 20px; }
    .blog-sidebar-help h2 { font-size: 21px; }
    .blog-index-hero { padding-bottom: 28px; }
    .blog-index-hero h1 { max-width: 780px; margin-bottom: 16px; font-size: clamp(34px,3.2vw,46px); line-height: 1.14; }
    .blog-index-hero > p { font-size: 17px; }
    .blog-category-nav { padding: 20px 0; }
    .blog-grid { gap: 24px; }
    .blog-card-copy { padding: 22px; }
    .blog-card h2 { font-size: 21px; }
}
@media (min-width: 1024px) and (max-height: 820px) {
    .blog-shell { padding-top: 28px; }
    .blog-cover img { height: clamp(240px,36vh,300px); max-height: 300px; }
}
/* blog-desktop-layout:end */
@media (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .blog-reading-layout { gap: 32px; grid-template-columns: minmax(0,1fr) 240px; } }
@media (max-width: 760px) { .blog-shell { padding: 110px 20px 55px; } .blog-reading-layout { display: flex; flex-direction: column; gap: 30px; } .blog-reading-sidebar { position: static; order: -1; width: 100%; } .blog-sidebar-help { display: none; } .blog-toc ol { columns: 2; } .blog-travel-cta { align-items: flex-start; flex-direction: column; padding: 28px; gap: 25px; } .blog-prose { font-size: 17px; } .blog-cover { margin-bottom: 30px; border-radius: 16px; } .blog-breadcrumb { margin-bottom: 28px; } }
@media (max-width: 540px) { .blog-grid { grid-template-columns: 1fr; gap: 22px; } .blog-shell { padding-left: 17px; padding-right: 17px; } .blog-card-copy { padding: 23px; } .blog-toc ol { columns: 1; } .blog-keypoints { padding: 23px; } .blog-author { padding: 22px; gap: 15px; } .blog-author-mark { flex-basis: 42px; height: 42px; } .blog-section-heading { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .blog-card { transition: none; } .blog-card:hover { transform: none; } }