.blog-page{
  --blog-ink:var(--paper);
  --blog-muted:var(--muted);
  --blog-soft:rgba(246,239,228,.68);
  --blog-line:var(--line);
  --blog-accent:var(--gold);
  --blog-accent-strong:var(--gold2);
  --blog-heading-font:'Playfair Display',Georgia,serif;
  --blog-body-font:Inter,system-ui,sans-serif;
  background:
    radial-gradient(circle at 82% 8%,rgba(201,150,74,.12),transparent 28%),
    linear-gradient(135deg,#0d0d0c 0%,#15110f 54%,#0b0b0a 100%);
  color:var(--blog-ink);
  font-family:var(--blog-body-font);
  overflow-x:hidden;
}

.blog-page *,
.blog-page *::before,
.blog-page *::after{
  box-sizing:border-box;
}

.blog-page h1,
.blog-page h2,
.blog-page p,
.blog-page a,
.blog-page button{
  overflow-wrap:anywhere;
}

.blog-main{
  min-height:100vh;
  padding:calc(var(--header) + 56px) 0 88px;
}

.journal-shell{
  width:min(960px,calc(100% - 48px));
  margin:0 auto;
  overflow:hidden;
  border:1px solid var(--blog-line);
  border-radius:16px;
  background:rgba(255,255,255,.055);
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
}

.journal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:40px 54px 0;
}

.journal-author{
  display:inline-flex;
  min-width:0;
  align-items:center;
  gap:14px;
  color:var(--blog-ink);
}

.journal-author img{
  flex:0 0 auto;
  width:54px;
  height:54px;
  border:1px solid rgba(201,150,74,.36);
  border-radius:50%;
  object-fit:cover;
  background:var(--panel2);
}

.journal-author strong,
.journal-author small{
  display:block;
}

.journal-author strong{
  font-family:var(--blog-heading-font);
  font-size:19px;
  line-height:1.08;
}

.journal-author small{
  margin-top:4px;
  color:var(--blog-muted);
  font-size:11px;
  font-weight:700;
  line-height:1.35;
}

.journal-count{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  border:1px solid rgba(201,150,74,.28);
  border-radius:50%;
  background:rgba(201,150,74,.08);
  text-align:center;
}

.journal-count strong{
  color:var(--blog-accent-strong);
  font-family:var(--blog-heading-font);
  font-size:28px;
  line-height:.9;
}

.journal-count span{
  color:var(--blog-soft);
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.journal-intro{
  display:grid;
  gap:22px;
  margin-top:64px;
  padding:0 54px;
}

.journal-kicker{
  margin:0 0 16px;
  color:var(--blog-accent-strong);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.journal-intro h1{
  max-width:760px;
  margin:0;
  color:var(--blog-ink);
  font-family:var(--blog-heading-font);
  font-size:64px;
  line-height:.98;
  letter-spacing:0;
}

.journal-intro > p{
  max-width:720px;
  margin:0;
  color:var(--blog-muted);
  font-family:var(--blog-heading-font);
  font-size:22px;
  line-height:1.45;
}

.journal-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  margin-top:54px;
  padding:0 54px;
  border-bottom:1px solid var(--blog-line);
}

.journal-tabs a{
  position:relative;
  padding:0 0 16px;
  color:var(--blog-soft);
  font-size:12px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.journal-tabs a::after{
  content:"";
  position:absolute;
  right:0;
  bottom:-1px;
  left:0;
  height:2px;
  background:transparent;
}

.journal-tabs a.active,
.journal-tabs a:hover{
  color:var(--blog-accent-strong);
}

.journal-tabs a.active::after,
.journal-tabs a:hover::after{
  background:var(--blog-accent);
}

.journal-content{
  display:block;
  padding:54px 54px 68px;
}

.post-list{
  display:grid;
}

.post-teaser{
  border-bottom:1px solid var(--blog-line);
  padding:0 0 32px;
}

.post-teaser + .post-teaser,
.more-posts .post-teaser:first-child{
  padding-top:32px;
}

.post-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 13px;
  margin:0 0 12px;
  color:var(--blog-soft);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.post-meta span::before{
  content:"";
  display:inline-block;
  width:4px;
  height:4px;
  margin:0 11px 2px 0;
  border-radius:50%;
  background:rgba(201,150,74,.58);
}

.post-teaser h2{
  max-width:780px;
  margin:0;
  font-family:var(--blog-heading-font);
  font-size:36px;
  line-height:1.08;
  letter-spacing:0;
}

.post-teaser h2 a{
  color:var(--blog-ink);
  transition:color .2s ease;
}

.post-teaser h2 a:hover{
  color:var(--blog-accent-strong);
}

.post-excerpt{
  max-width:760px;
  margin:14px 0 0;
  color:var(--blog-muted);
  font-size:16px;
  line-height:1.62;
}

.blog-article{
  overflow:visible;
}

.article-hero{
  padding:58px 54px 44px;
  border-bottom:1px solid var(--blog-line);
}

.back-to-blog{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  margin-bottom:34px;
  border:1px solid rgba(201,150,74,.36);
  border-radius:8px;
  padding:8px 12px;
  color:var(--blog-accent-strong);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.back-to-blog:hover{
  background:rgba(201,150,74,.12);
  color:var(--blog-ink);
}

.article-hero h1{
  max-width:820px;
  margin:0;
  color:var(--blog-ink);
  font-family:var(--blog-heading-font);
  font-size:64px;
  line-height:1;
  letter-spacing:0;
}

.article-dek{
  max-width:760px;
  margin:20px 0 0;
  color:var(--blog-muted);
  font-family:var(--blog-heading-font);
  font-size:22px;
  line-height:1.45;
}

.article-body{
  padding:54px;
}

.article-body p{
  max-width:760px;
  margin:0;
  color:var(--blog-muted);
  font-size:18px;
  line-height:1.78;
}

.article-body p + p{
  margin-top:24px;
}

.article-body .article-section-title{
  max-width:760px;
  margin:46px 0 18px;
  color:var(--blog-ink);
  font-family:var(--blog-heading-font);
  font-size:34px;
  line-height:1.12;
  letter-spacing:0;
}

.article-body .article-section-title:first-child{
  margin-top:0;
}

.article-body .article-subtopic{
  max-width:760px;
  margin:30px 0 8px;
  color:var(--blog-accent-strong);
  font-size:18px;
  font-weight:900;
  line-height:1.35;
  letter-spacing:.02em;
}

.article-body .article-section-title + p,
.article-body .article-subtopic + p,
.article-body .article-list + p{
  margin-top:0;
}

.article-body .article-list{
  display:grid;
  gap:12px;
  max-width:760px;
  margin:0 0 28px;
  padding:0;
  list-style:none;
}

.article-body .article-list li{
  position:relative;
  margin:0;
  border-left:3px solid rgba(201,150,74,.72);
  border-radius:0 8px 8px 0;
  padding:13px 16px 13px 18px;
  background:rgba(255,255,255,.045);
  color:var(--blog-muted);
  font-size:17px;
  font-weight:700;
  line-height:1.55;
}

.article-body .question-list li{
  border-left-color:var(--blog-accent);
  background:rgba(201,150,74,.09);
}

.article-body .question-list strong{
  color:var(--blog-ink);
  font-weight:900;
}

.article-next{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:space-between;
  padding:0 54px 68px;
}

.article-next a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  border:1px solid rgba(201,150,74,.42);
  border-radius:8px;
  padding:12px 16px;
  color:var(--blog-ink);
  font-size:13px;
  font-weight:900;
}

.article-next a:hover{
  border-color:rgba(201,150,74,.7);
  background:rgba(201,150,74,.12);
}

.post-actions{
  display:flex;
  justify-content:center;
  padding-top:36px;
}

.see-more-posts{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:46px;
  max-width:100%;
  border:1px solid rgba(201,150,74,.42);
  border-radius:8px;
  padding:12px 18px;
  background:rgba(201,150,74,.10);
  color:var(--blog-ink);
  font:inherit;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,transform .2s ease;
}

.see-more-posts:hover{
  border-color:rgba(201,150,74,.7);
  background:rgba(201,150,74,.16);
  transform:translateY(-1px);
}

.see-more-posts__count{
  color:var(--blog-accent-strong);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

:root[data-theme="light"] .blog-page{
  --blog-ink:#17130f;
  --blog-muted:#5f564d;
  --blog-soft:rgba(23,19,15,.72);
  --blog-line:rgba(43,35,27,.16);
  --blog-accent:#9b641f;
  --blog-accent-strong:#7d431c;
  background:
    radial-gradient(circle at 82% 8%,rgba(201,150,74,.18),transparent 30%),
    radial-gradient(circle at 12% 86%,rgba(139,48,40,.07),transparent 32%),
    linear-gradient(135deg,#fffaf2 0%,#f3e7d8 54%,#fbf3e8 100%);
}

:root[data-theme="light"] .journal-shell{
  border-color:rgba(43,35,27,.14);
  background:rgba(255,250,242,.94);
  box-shadow:0 28px 72px rgba(94,72,42,.14);
}

:root[data-theme="light"] .journal-author img{
  background:#f1e2cf;
  border-color:rgba(125,67,28,.22);
}

:root[data-theme="light"] .journal-count{
  border-color:rgba(125,67,28,.20);
  background:rgba(201,150,74,.12);
}

:root[data-theme="light"] .journal-tabs a.active::after,
:root[data-theme="light"] .journal-tabs a:hover::after{
  background:#9b641f;
}

:root[data-theme="light"] .journal-author,
:root[data-theme="light"] .journal-intro h1,
:root[data-theme="light"] .post-teaser h2 a{
  color:#17130f;
}

:root[data-theme="light"] .journal-tabs a,
:root[data-theme="light"] .post-meta{
  color:rgba(23,19,15,.72);
}

:root[data-theme="light"] .journal-tabs a.active,
:root[data-theme="light"] .journal-tabs a:hover,
:root[data-theme="light"] .journal-kicker,
:root[data-theme="light"] .see-more-posts__count{
  color:#7d431c;
}

:root[data-theme="light"] .post-teaser h2 a:hover{
  color:#7d431c;
}

:root[data-theme="light"] .article-hero h1,
:root[data-theme="light"] .article-next a{
  color:#17130f;
}

:root[data-theme="light"] .article-body .article-list li{
  background:rgba(125,67,28,.055);
}

:root[data-theme="light"] .article-body .question-list li{
  background:rgba(201,150,74,.14);
}

:root[data-theme="light"] .back-to-blog{
  border-color:rgba(125,67,28,.28);
  color:#7d431c;
}

:root[data-theme="light"] .back-to-blog:hover,
:root[data-theme="light"] .article-next a:hover{
  background:rgba(201,150,74,.16);
}

:root[data-theme="light"] .post-meta span::before{
  background:rgba(125,67,28,.50);
}

:root[data-theme="light"] .see-more-posts{
  border-color:rgba(125,67,28,.28);
  background:rgba(201,150,74,.13);
  color:#17130f;
}

:root[data-theme="light"] .see-more-posts:hover{
  border-color:rgba(125,67,28,.48);
  background:rgba(201,150,74,.20);
}

:root[data-theme="light"] .blog-page .side-rail{
  border-color:rgba(43,35,27,.14);
  background:rgba(255,250,242,.72);
}

:root[data-theme="light"] .blog-page .rail-social,
:root[data-theme="light"] .blog-page .rail-email,
:root[data-theme="light"] .blog-page .percent{
  color:#7a6d61;
}

:root[data-theme="light"] .blog-page .rail-social a:hover,
:root[data-theme="light"] .blog-page .rail-email:hover{
  color:#7d431c;
}

@media(max-width:760px){
  .blog-main{
    padding:calc(var(--header) + 24px) 0 56px;
  }

  .journal-shell{
    width:calc(100% - 24px);
    border-radius:12px;
  }

  .journal-header{
    align-items:flex-start;
    padding:22px 20px 0;
  }

  .journal-author{
    gap:11px;
  }

  .journal-author img{
    width:46px;
    height:46px;
  }

  .journal-author strong{
    font-size:17px;
  }

  .journal-author small{
    font-size:10px;
  }

  .journal-count{
    width:56px;
    height:56px;
  }

  .journal-count strong{
    font-size:22px;
  }

  .journal-count span{
    font-size:9px;
  }

  .journal-intro{
    margin-top:36px;
    padding:0 20px;
  }

  .journal-intro h1{
    font-size:44px;
    line-height:1;
  }

  .journal-intro > p{
    font-size:18px;
  }

  .journal-tabs{
    gap:18px;
    margin-top:36px;
    padding:0 20px;
  }

  .journal-tabs a{
    padding-bottom:14px;
    font-size:10px;
  }

  .journal-content{
    padding:30px 20px 40px;
  }

  .post-meta{
    gap:7px 10px;
    font-size:9px;
  }

  .post-meta span::before{
    margin-right:8px;
  }

  .post-teaser h2{
    font-size:30px;
  }

  .post-excerpt{
    font-size:15px;
  }

  .article-hero{
    padding:30px 20px;
  }

  .article-hero h1{
    font-size:44px;
    line-height:1.02;
  }

  .article-dek{
    font-size:18px;
  }

  .article-body{
    padding:30px 20px;
  }

  .article-body p{
    font-size:16px;
  }

  .article-body .article-section-title{
    margin-top:36px;
    font-size:28px;
  }

  .article-body .article-subtopic{
    margin-top:24px;
    font-size:17px;
  }

  .article-body .article-list{
    gap:10px;
    margin-bottom:24px;
  }

  .article-body .article-list li{
    padding:12px 14px;
    font-size:15px;
  }

  .article-next{
    padding:0 20px 40px;
  }
}

@media(max-width:460px){
  .journal-shell{
    width:calc(100% - 16px);
  }

  .journal-header{
    display:grid;
  }

  .journal-count{
    width:auto;
    height:auto;
    justify-self:start;
    display:flex;
    gap:6px;
    border-radius:8px;
    padding:8px 10px;
  }

  .journal-tabs{
    gap:14px;
  }

  .journal-intro h1,
  .article-hero h1{
    font-size:38px;
  }

  .post-teaser h2{
    font-size:27px;
  }

  .article-next{
    display:grid;
  }

  .article-next a{
    width:100%;
  }

  .see-more-posts{
    width:100%;
  }
}

/* Blog pages use document scrolling, but keep the desktop footer aligned
   with the shared site footer between tablet and small desktop widths. */
body.blog-page.normal-scroll-page,
body.blog-page.normal-scroll-page.deck-ready{
  height:auto !important;
  min-height:100% !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior-y:auto !important;
}

body.blog-page.normal-scroll-page main,
body.blog-page.normal-scroll-page.deck-ready main{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  position:relative !important;
}

body.blog-page .footer,
body.blog-page .footer *{
  max-width:100%;
  box-sizing:border-box;
}

body.blog-page .footer-bottom{
  width:min(1180px,calc(100% - clamp(28px,5vw,64px))) !important;
  min-height:62px !important;
  margin:clamp(14px,2vw,22px) auto 0 !important;
  padding:14px clamp(12px,2vw,18px) !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

body.blog-page .footer-bottom__left{
  min-width:0 !important;
}

body.blog-page .footer-bottom__left p{
  font-size:12px !important;
  letter-spacing:.02em !important;
}

body.blog-page .footer-bottom .footer-trust__item{
  min-width:46px !important;
  height:30px !important;
  padding:5px 9px !important;
}

body.blog-page .footer-bottom .footer-trust__item img{
  max-width:64px !important;
  max-height:17px !important;
  object-fit:contain !important;
}

body.blog-page .footer-socials{
  gap:10px !important;
}

body.blog-page .footer-socials a{
  width:38px !important;
  height:38px !important;
}

body.blog-page .footer-socials a img{
  width:18px !important;
  height:18px !important;
  object-fit:contain !important;
}

@media(min-width:992px) and (max-width:1300px){
  html:has(body.blog-page.normal-scroll-page),
  html:has(body.blog-page.normal-scroll-page.deck-ready){
    height:auto !important;
    min-height:100dvh !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior-y:auto !important;
  }

  body.blog-page.normal-scroll-page,
  body.blog-page.normal-scroll-page.deck-ready{
    height:auto !important;
    min-height:100dvh !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  body.blog-page .footer{
    margin-left:var(--rail) !important;
    width:calc(100% - var(--rail)) !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:34px 0 max(18px,calc(env(safe-area-inset-bottom) + 14px)) !important;
    overflow:visible !important;
  }

  body.blog-page .footer > .container,
  body.blog-page .footer .container{
    width:min(1180px,calc(100% - clamp(28px,5vw,64px))) !important;
  }

  body.blog-page .footer-shell{
    gap:clamp(18px,2.6vh,30px) !important;
  }

  body.blog-page .footer-promo{
    padding:18px 28px !important;
    border-radius:20px !important;
  }

  body.blog-page .footer-promo__inner{
    gap:18px !important;
  }

  body.blog-page .footer-promo h2{
    font-size:clamp(24px,2.7vw,34px) !important;
    line-height:1.03 !important;
  }

  body.blog-page .footer-promo p,
  body.blog-page .footer-newsletter p,
  body.blog-page .footer-col a{
    font-size:11px !important;
    line-height:1.35 !important;
  }

  body.blog-page .footer-signup input,
  body.blog-page .footer-signup button{
    height:40px !important;
  }

  body.blog-page .footer-main{
    grid-template-columns:minmax(220px,1.1fr) repeat(3,minmax(120px,.7fr)) !important;
    gap:14px 28px !important;
  }

  body.blog-page .footer-newsletter h3,
  body.blog-page .footer-col h3{
    margin-bottom:7px !important;
    font-size:14px !important;
  }

  body.blog-page .footer-col{
    gap:7px !important;
  }

  body.blog-page .footer-separator{
    margin-top:clamp(14px,2.2vh,22px) !important;
  }

  body.blog-page .footer-bottom{
    min-height:52px !important;
    margin-top:clamp(6px,1.2vh,12px) !important;
    margin-bottom:0 !important;
    padding:8px 14px !important;
  }

  body.blog-page .blog-main,
  body.blog-page .journal-shell,
  body.blog-page .journal-content,
  body.blog-page .article-hero,
  body.blog-page .article-body{
    height:auto !important;
    min-height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
}