:root{
  --blog-montage-bg: #120d0a;
  --blog-montage-panel: rgba(25,18,14,.82);
  --blog-montage-panel-strong: #f3e3ce;
  --blog-montage-paper: #efe0cb;
  --blog-montage-paper-2: #ead4b2;
  --blog-montage-ink: #2f1d12;
  --blog-montage-line: rgba(196,155,99,.24);
  --blog-montage-accent: #c49b63;
  --blog-montage-accent-soft: rgba(196,155,99,.16);
  --blog-montage-muted: #b79a74;
  --blog-montage-text: #f2e5d1;
  --blog-montage-text-soft: #d9bfa0;
  --blog-montage-serif: "Source Serif 4", Georgia, serif;
  --blog-montage-sans: "IBM Plex Sans", system-ui, sans-serif;
  --blog-montage-mono: "IBM Plex Mono", ui-monospace, monospace;
}

body.blog-page--montage{
  background: var(--blog-montage-bg);
  color: var(--blog-montage-text);
  font-family: var(--blog-montage-sans);
}

.blog-page--montage .topbar{
  border-bottom: 1px solid var(--blog-montage-line);
  backdrop-filter: blur(14px);
  background: rgba(18,13,10,.9);
}

.blog-page--montage .brand__name,
.blog-page--montage .brand__role,
.blog-page--montage .lang__link,
.blog-page--montage .nav__link,
.blog-page--montage .mono,
.blog-page--montage .post__date,
.blog-page--montage .blog__date{
  font-family: var(--blog-montage-mono);
}

.blog-page--montage .brand__name,
.blog-page--montage .brand__role,
.blog-page--montage .lang__link,
.blog-page--montage .nav__link{
  color: #cfb89a;
}

.blog-page--montage .nav__link:hover,
.blog-page--montage .lang__link:hover,
.blog-page--montage .brand:hover .brand__name,
.blog-page--montage .brand:hover .brand__role{
  color: var(--blog-montage-text);
}

.blog-page--montage .nav-toggle{
  color: var(--blog-montage-text);
}

.blog-page--montage .nav-toggle__icon,
.blog-page--montage .nav-toggle__icon::before,
.blog-page--montage .nav-toggle__icon::after{
  background: var(--blog-montage-text);
}

.blog-page--montage .blog{
  padding: 104px 0 132px;
}

.blog-page--montage .blog__container{
  max-width: 960px;
  margin: 0 auto;
  padding: 0 32px;
}

.blog-page--montage .blog__container--with-calendar{
  max-width: 1340px;
  display: grid;
  grid-template-columns: minmax(0, 960px) 320px;
  justify-content: space-between;
  gap: 6ch;
  align-items: start;
}

.blog-page--montage .blog__main{
  width: min(960px, 100%);
  min-width: 0;
}

.blog-page--montage .blog__main .container{
  width: min(960px, 100%);
  margin: 0;
  padding: 0;
}

.blog-page--montage .prose{
  max-width: min(96ch, 100%);
}

.blog-page--montage .blog__main .prose{
  max-width: min(96ch, 100%);
  margin: 0;
}

.blog-page--montage .blog-calendar{
  position: sticky;
  top: 96px;
}

.blog-page--montage .blog-calendar__panel{
  padding: 20px 20px 18px;
  border: 1px solid var(--blog-montage-line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(243,227,206,.04), rgba(243,227,206,.01)),
    rgba(25,18,14,.78);
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
}

.blog-page--montage .blog-calendar__eyebrow{
  display: inline-block;
  margin-bottom: 8px;
  color: var(--blog-montage-muted);
  font-family: var(--blog-montage-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.blog-page--montage .blog-calendar__title{
  margin: 0 0 18px;
  font-size: 1.5rem;
  line-height: 1.08;
}

.blog-page--montage .blog-calendar__tree{
  display: grid;
  gap: 10px;
}

.blog-page--montage .blog-calendar__year,
.blog-page--montage .blog-calendar__month{
  border-top: 1px solid var(--blog-montage-line);
  padding-top: 10px;
}

.blog-page--montage .blog-calendar__summary{
  cursor: pointer;
  list-style: none;
  color: var(--blog-montage-text);
}

.blog-page--montage .blog-calendar__summary::-webkit-details-marker{
  display: none;
}

.blog-page--montage .blog-calendar__summary::before{
  content: "+";
  display: inline-block;
  width: 1.1em;
  margin-right: 6px;
  color: var(--blog-montage-accent);
}

.blog-page--montage details[open] > .blog-calendar__summary::before{
  content: "–";
}

.blog-page--montage .blog-calendar__summary--year{
  font-family: var(--blog-montage-mono);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.blog-page--montage .blog-calendar__summary--month{
  font-size: 15px;
  line-height: 1.3;
}

.blog-page--montage .blog-calendar__months{
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.blog-page--montage .blog-calendar__days{
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.blog-page--montage .blog-calendar__day{
  display: grid;
  grid-template-columns: 2ch 1fr;
  gap: 10px;
  align-items: start;
}

.blog-page--montage .blog-calendar__day-number{
  color: var(--blog-montage-muted);
  font-family: var(--blog-montage-mono);
  font-size: 12px;
  line-height: 1.6;
}

.blog-page--montage .blog-calendar__day-posts{
  display: grid;
  gap: 6px;
}

.blog-page--montage .blog-calendar__post-link{
  color: var(--blog-montage-text);
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
}

.blog-page--montage .blog-calendar__post-link:hover{
  color: #fff6ea;
  text-decoration: underline;
  text-decoration-color: var(--blog-montage-accent);
}

.blog-page--montage .blog-calendar__post-link.is-current{
  color: var(--blog-montage-panel-strong);
}

.blog-page--montage .section{
  background: transparent;
}

.blog-page--montage .blog__main .section{
  padding-top: 0;
}

/* Blog text should wrap with Russian hyphenation instead of emergency splits. */
.blog-page--montage :where(
  div,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  blockquote,
  figcaption,
  a,
  span,
  strong,
  em,
  small
):not(code):not(pre):not(kbd):not(samp){
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}

.blog-page--montage h1,
.blog-page--montage h2,
.blog-page--montage h3,
.blog-page--montage .post__title{
  color: var(--blog-montage-text);
  font-family: var(--blog-montage-serif);
  letter-spacing: -.025em;
}

.blog-page--montage h1{
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: .98;
  margin-bottom: 26px;
}

.blog-page--montage .post__title{
  font-size: clamp(2.47rem, 4.75vw, 4.18rem);
  line-height: .98;
  margin-bottom: 26px;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.blog-page--montage h2{
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.08;
}

.blog-page--montage p,
.blog-page--montage li,
.blog-page--montage blockquote{
  color: var(--blog-montage-text);
  font-family: var(--blog-montage-sans);
  font-size: 18px;
  line-height: 1.78;
}

.blog-page--montage .post__date,
.blog-page--montage .blog__date,
.blog-page--montage time{
  color: var(--blog-montage-muted);
  opacity: 1;
}

.blog-page--montage .post__date{
  display: block;
}

.blog-page--montage .post__tags,
.blog-page--montage .blog-all__tags{
  margin: .45rem 0 0;
  color: var(--blog-montage-text-soft);
  font-family: var(--blog-montage-mono);
  font-size: 14px;
  line-height: 1.65;
}

.blog-page--montage .blog-all__tags{
  margin-bottom: .85rem;
}

.blog-page--montage .post__tag-link,
.blog-page--montage .blog-all__tag-link{
  color: var(--blog-montage-text-soft);
  text-decoration-color: rgba(217,191,160,.32);
}

.blog-page--montage .post__tag-link:hover,
.blog-page--montage .blog-all__tag-link:hover{
  color: var(--blog-montage-panel-strong);
  text-decoration-color: var(--blog-montage-accent);
}

.blog-page--montage .tag-index{
  margin: .2rem 0 3rem;
}

.blog-page--montage .tag-index__panel{
  padding: 22px 22px 20px;
  border: 1px solid var(--blog-montage-line);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(243,227,206,.05), rgba(243,227,206,.015)),
    rgba(25,18,14,.72);
  box-shadow: 0 20px 70px rgba(0,0,0,.16);
}

.blog-page--montage .tag-index__eyebrow{
  display: inline-block;
  margin: 0 0 .85rem;
  color: var(--blog-montage-muted);
  font-size: 12px;
  letter-spacing: .12em;
}

.blog-page--montage .tag-index__header{
  display: grid;
  gap: .4rem;
  min-width: 0;
}

.blog-page--montage .tag-index__title{
  margin: 0;
  color: var(--blog-montage-text);
}

.blog-page--montage .tag-index__details{
  display: block;
}

.blog-page--montage .tag-index__summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}

.blog-page--montage .tag-index__summary::-webkit-details-marker{
  display: none;
}

.blog-page--montage .tag-index__summary .tag-index__eyebrow{
  margin: 0;
}

.blog-page--montage .tag-index__summary::after{
  content: "+";
  flex: 0 0 auto;
  color: var(--blog-montage-muted);
  font-family: var(--blog-montage-mono);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform .18s ease, color .18s ease;
}

.blog-page--montage .tag-index__details[open] > .tag-index__summary::after{
  transform: rotate(45deg);
  color: var(--blog-montage-panel-strong);
}

.blog-page--montage .tag-index__body{
  margin-top: 1rem;
}

.blog-page--montage .tag-index__lead{
  margin: 0;
  color: var(--blog-montage-text-soft);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.blog-page--montage .tag-index__cloud{
  display: flex;
  flex-wrap: wrap;
  gap: 11px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-page--montage .tag-index__item{
  margin: 0;
}

.blog-page--montage .tag-index__chip{
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  padding: .58rem .92rem .56rem;
  border: 1px solid rgba(217,191,160,.16);
  border-radius: 999px;
  background: rgba(243,227,206,.035);
  color: var(--blog-montage-text);
  text-decoration: none;
  line-height: 1.1;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}

.blog-page--montage .tag-index__chip:hover{
  transform: translateY(-1px);
  border-color: rgba(196,155,99,.45);
  background: rgba(243,227,206,.08);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  color: #fff6ea;
}

.blog-page--montage .tag-index__name{
  display: inline-block;
}

.blog-page--montage .tag-index__count{
  color: var(--blog-montage-muted);
  font-size: .78rem;
  line-height: 1;
}

.blog-page--montage .tag-index__chip--major{
  padding-inline: 1rem 1.02rem;
  font-size: 1.14rem;
  border-color: rgba(196,155,99,.3);
  background: rgba(196,155,99,.08);
}

.blog-page--montage .tag-index__chip--major .tag-index__count{
  font-size: .8rem;
}

.blog-page--montage .tag-index__chip--medium{
  font-size: 1rem;
}

.blog-page--montage .tag-index__chip--minor{
  font-size: .93rem;
  color: var(--blog-montage-text-soft);
}

.blog-page--montage .related-posts{
  margin-top: 2.8rem;
}

.blog-page--montage .related-posts__panel{
  padding: 22px 22px 20px;
  border: 1px solid var(--blog-montage-line);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(243,227,206,.045), rgba(243,227,206,.015)),
    rgba(25,18,14,.72);
}

.blog-page--montage .related-posts__eyebrow{
  display: inline-block;
  margin: 0 0 .85rem;
  color: var(--blog-montage-muted);
  font-size: 12px;
  letter-spacing: .12em;
}

.blog-page--montage .related-posts__title{
  margin: 0 0 1.2rem;
}

.blog-page--montage .related-posts__list{
  display: grid;
  gap: 1rem;
}

.blog-page--montage .related-posts__item{
  padding-top: 1rem;
  border-top: 1px solid rgba(196,155,99,.16);
}

.blog-page--montage .related-posts__item:first-child{
  padding-top: 0;
  border-top: 0;
}

.blog-page--montage .related-posts__item-title{
  margin: 0 0 .28rem;
  font-family: var(--blog-montage-serif);
  font-size: 1.24rem;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.blog-page--montage .related-posts__item-title a{
  color: var(--blog-montage-text);
  text-decoration: none;
}

.blog-page--montage .related-posts__item-title a:hover{
  color: #fff6ea;
}

.blog-page--montage .related-posts__date{
  display: inline-block;
  margin-bottom: .45rem;
  color: var(--blog-montage-muted);
  font-size: 13px;
}

.blog-page--montage .related-posts__tags{
  margin: 0;
  color: var(--blog-montage-text-soft);
  font-size: 13px;
  line-height: 1.6;
}

.blog-page--montage .related-posts__tag-link{
  color: var(--blog-montage-text-soft);
  text-decoration-color: rgba(217,191,160,.32);
}

.blog-page--montage .related-posts__tag-link:hover{
  color: var(--blog-montage-panel-strong);
  text-decoration-color: var(--blog-montage-accent);
}

.blog-page--montage a{
  color: var(--blog-montage-panel-strong);
  text-decoration-color: rgba(243,227,206,.42);
  text-underline-offset: .16em;
}

.blog-page--montage a:hover{
  color: #fff6ea;
  text-decoration-color: var(--blog-montage-accent);
}

.blog-page--montage .blog__item,
.blog-page--montage .blog-all__item{
  border-bottom-color: var(--blog-montage-line);
}

.blog-page--montage .blog__item a,
.blog-page--montage .blog-all__h2 a{
  color: var(--blog-montage-text);
  text-decoration: none;
}

.blog-page--montage .blog__item a:hover,
.blog-page--montage .blog-all__h2 a:hover{
  color: #fff6ea;
}

.blog-page--montage .blog-all__content,
.blog-page--montage .post__content,
.blog-page--montage .post__header,
.blog-page--montage .blog__list{
  background: transparent;
}

.blog-page--montage .post__content > * + *{
  margin-top: 1.1em;
}

.blog-page--montage .post__footer{
  padding-top: 18px;
  border-top: 1px solid var(--blog-montage-line);
}

.blog-page--montage .post__content blockquote{
  margin: 1.6rem 0;
  padding: 1rem 1.2rem;
  border-left: 2px solid var(--blog-montage-accent);
  background: rgba(243,227,206,.04);
}

.blog-page--montage .post__content hr{
  border: 0;
  border-top: 1px solid var(--blog-montage-line);
}

.blog-page--montage .post-figure img{
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}

.blog-page--montage .post-figure figcaption,
.blog-page--montage .post-figure__meta{
  color: var(--blog-montage-text-soft);
}

@media (max-width: 760px){
  .blog-page--montage .blog{
    padding: 88px 0 112px;
  }

  .blog-page--montage .blog__container{
    max-width: none;
    padding: 0 18px;
  }

  .blog-page--montage .blog__container--with-calendar{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .blog-page--montage .prose{
    max-width: 100%;
  }

  .blog-page--montage .blog-calendar{
    position: static;
  }

  .blog-page--montage .blog__container--listing .blog-calendar{
    order: -1;
  }

  .blog-page--montage .blog__container--post .blog-calendar{
    order: 2;
  }

  .blog-page--montage p,
  .blog-page--montage li,
  .blog-page--montage blockquote{
    font-size: 17px;
  }

  .blog-page--montage .post__title{
    font-size: clamp(2.1rem, 7.6vw, 3.2rem);
    line-height: 1.02;
  }

  .blog-page--montage .tag-index{
    margin-bottom: 2.4rem;
  }

  .blog-page--montage .tag-index__panel{
    padding: 18px 16px 16px;
    border-radius: 18px;
  }

  .blog-page--montage .tag-index__summary{
    gap: 12px;
  }

  .blog-page--montage .tag-index__cloud{
    gap: 10px;
  }

  .blog-page--montage .tag-index__chip{
    padding: .56rem .8rem .54rem;
  }

  .blog-page--montage .tag-index__chip--major{
    font-size: 1.04rem;
  }

  .blog-page--montage .related-posts{
    margin-top: 2.3rem;
  }

  .blog-page--montage .related-posts__panel{
    padding: 18px 16px 16px;
    border-radius: 18px;
  }

  .blog-page--montage .related-posts__item-title{
    font-size: 1.12rem;
  }
}
