/* Journal layout and article typography; the site shell is shared with the homepage. */

.blog-main {
  max-width:1120px;
  padding-bottom:95px
}

.blog-intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:end;
  gap:70px;
  padding-block:66px 54px;
  border-bottom:1px solid var(--line)
}

.blog-intro .eyebrow {
  margin-bottom:20px
}

.blog-page .blog-intro h1 {
  font-size:clamp(58px,7.02vw,94px);
  line-height:1;
  letter-spacing:-.065em;
  font-weight:550
}

.blog-description {
  font-size:18px;
  line-height:1.85;
  color:var(--muted);
  max-width:430px;
  padding-bottom:4px
}

.journal-list {
  display:grid;
  gap:24px;
  padding-top:40px
}

.post-card {
  display:grid;
  grid-template-columns:55px minmax(0,1fr);
  gap:24px;
  padding:40px 42px;
  background:#fffdf8;
  border:1px solid var(--line);
  border-radius:4px
}

.post-index {
  font-family:var(--display);
  font-size:12px;
  font-weight:600;
  color:var(--rust);
  padding-top:8px;
  letter-spacing:.04em
}

.post-card .card-body {
  min-width:0;
  max-width:820px
}

.post-card h2 {
  font-size:clamp(22px,2.38vw,31px);
  line-height:1.2;
  letter-spacing:-.045em;
  font-weight:600;
  max-width:760px
}

.post-card .post-meta {
  font-size:12px;
  color:var(--muted);
  margin-top:13px;
  margin-bottom:25px;
  letter-spacing:.015em
}

.post-card p,.post-card li {
  font-size:17px;
  line-height:1.9;
  overflow-wrap:break-word
}

.post-card p {
  margin-top:16px
}

.post-card .post-meta+p {
  margin-top:0
}

.post-card .card-body>p:not(.post-meta) {
  color:#545b51
}

.post-card h3 {
  font-size:18px;
  line-height:1.45;
  letter-spacing:-.02em;
  margin-top:30px;
  margin-bottom:12px;
  font-weight:600
}

.post-card h3+p {
  margin-top:0
}

.post-card em {
  font-family:inherit;
  font-weight:inherit;
  letter-spacing:normal
}

.post-card ul,.post-card ol {
  padding-left:24px;
  margin-block:15px 22px
}

.post-card li+li {
  margin-top:9px
}

.post-card li::marker {
  color:var(--rust)
}

.post-card p a,.post-card li a {
  color:var(--rust);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px
}

.post-card p a:hover,.post-card li a:hover {
  color:var(--ink)
}

.post-card img {
  width:100%;
  border-radius:3px;
  margin-block:18px
}

.article-toggle,.article-close {
  display:inline-flex;
  align-items:center;
  gap:13px;
  min-height:44px;
  background:none;
  border:0;
  border-bottom:1px solid var(--rust);
  padding:8px 0;
  font-size:12px;
  line-height:1.4;
  font-weight:600;
  color:var(--rust);
  transition:color .2s,gap .2s
}

.article-toggle {
  margin-top:21px
}

.article-toggle:hover,.article-close:hover {
  color:var(--ink);
  gap:18px
}

.toggle-mark {
  font-size:20px;
  font-weight:400;
  line-height:1;
  transition:transform .2s
}

.article-toggle[aria-expanded=true] .toggle-mark {
  transform:rotate(45deg)
}

.post-collapse {
  margin-top:28px;
  border-top:1px solid var(--line);
  padding-top:2px
}

.article-close {
  margin-top:28px;
  margin-bottom:3px
}

.article-rule {
  border-bottom:1px solid var(--line)
}

.article-rule:first-child {
  margin-top:13px
}

.article-rule summary {
  padding-block:19px;
  list-style:none
}

.article-rule summary::-webkit-details-marker {
  display:none
}

.article-rule summary h3 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  font-size:16px;
  line-height:1.5;
  margin:0;
  letter-spacing:-.02em
}

.disclosure-mark {
  font-family:var(--body);
  font-size:18px;
  line-height:1;
  color:var(--rust);
  flex-shrink:0;
  transition:transform .2s
}

.article-rule[open] .disclosure-mark {
  transform:rotate(90deg)
}

.sub-collapse {
  padding-bottom:23px
}

.sub-collapse>p:first-child {
  margin-top:0
}

.post-card .article-rule+div:not(.article-rule) {
  margin-top:25px
}

@media(max-width:960px) {
  .blog-intro {
    gap:40px;
    padding-block:52px 43px
  }

  .blog-description {
    font-size:16px
  }

  .post-card {
    padding:32px;
    grid-template-columns:38px minmax(0,1fr);
    gap:20px
  }

  .post-card h2 {
    font-size:25px
  }

  .post-card p,.post-card li {
    font-size:16px
  }

}

@media(max-width:740px) {
  .blog-main {
    padding-bottom:60px
  }

  .blog-intro {
    grid-template-columns:1fr;
    gap:24px;
    padding-block:42px 35px
  }

  .blog-intro .eyebrow {
    font-size:12px;
    margin-bottom:19px
  }

  .blog-page .blog-intro h1 {
    font-size:58px
  }

  .blog-description {
    font-size:16px;
    max-width:440px
  }

  .journal-list {
    gap:19px;
    padding-top:28px
  }

  .post-card {
    grid-template-columns:1fr;
    gap:14px;
    padding:25px 22px
  }

  .post-index {
    font-size:12px;
    padding:0
  }

  .post-card h2 {
    font-size:22px;
    line-height:1.25
  }

  .post-card .post-meta {
    font-size:12px;
    margin-top:12px;
    margin-bottom:20px
  }

  .post-card p,.post-card li {
    font-size:16px;
    line-height:1.85
  }

  .post-card h3 {
    font-size:17px
  }

  .post-collapse {
    margin-top:25px
  }

  .article-toggle,.article-close {
    font-size:12px
  }

  .article-rule summary {
    padding-block:18px
  }

  .article-rule summary h3 {
    font-size:15px;
    gap:15px
  }

  .sub-collapse {
    padding-bottom:20px
  }

}

@media(max-width:380px) {
  .post-card {
    padding:23px 18px
  }

  .post-card h2 {
    font-size:22px
  }

  .post-card p,.post-card li {
    font-size:16px
  }

  .post-card ul,.post-card ol {
    padding-left:20px
  }

}