.journal{border-top:1px solid var(--line);margin-top:24px;padding-top:18px;min-width:0}
.journal h2{font-size:18px}
#journalStatus{color:var(--muted);font-size:12px}
#journalStatus:empty{display:none}

.journal details{border-bottom:1px solid var(--line);padding:10px 0;overflow-wrap:anywhere}
.journal summary{cursor:pointer;color:var(--ink)}
.journal summary small{color:var(--green);margin:0 .4em;font-size:11px}
.journal summary small:empty{display:none}
.journal details p{white-space:pre-wrap;color:var(--muted);margin:8px 0;font-size:13px}
.journal-top{margin:0 0 18px;padding:16px 22px;border:1px solid var(--line);border-left:3px solid var(--green)}.journal-top #journalStatus{margin:5px 0 0}
.journal-photo{display:block;max-width:100%;max-height:19rem;object-fit:contain;margin:12px 0;border-radius:8px}
.journal{font-family:"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif}.journal summary{font-size:15px;line-height:1.65}.journal details p{font-size:15px;line-height:1.85;color:#d6e1ef;margin:10px 0 14px}.journal summary small,#journalStatus{font-size:12px}

/* Journal reading typography */
.journal{font-family:"Pretendard Variable","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}
.journal:lang(ja),.journal:lang(zh-Hans){font-family:var(--reading-font)}
.journal :lang(ko){font-family:"Pretendard Variable","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}
.journal h2,.journal summary strong{font-weight:650}
.journal details p{font-size:16px;font-weight:400;line-height:1.8;letter-spacing:-.01em;color:#e4ebf5}
.journal:lang(en){font-family:"Source Sans 3",system-ui,sans-serif}
.journal:lang(es){font-family:Lato,system-ui,sans-serif}
.journal:lang(ja){font-family:"Noto Sans JP","Yu Gothic","Hiragino Sans",sans-serif}
.journal:lang(zh-Hans){font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif}
.journal:lang(en) details p,.journal:lang(es) details p{font-size:17px;letter-spacing:normal}
.journal:lang(ja) details p,.journal:lang(zh-Hans) details p{letter-spacing:normal;line-height:1.9}
.journal-share{padding:6px 12px;border:1px solid var(--line);border-radius:7px;color:var(--ink);background:var(--surface);margin:8px 0}.journal details[id]{scroll-margin-top:64px}
.journal summary{scroll-margin-top:64px}

/* Journal post spacing and narrow screens */
.journal details p{margin:0 0 .85em;line-height:1.7}
.journal details p:last-of-type{margin-bottom:.5em}
.journal summary + p,.journal summary + .journal-body{margin-top:.65rem}
.journal-photo{height:auto;margin:.65rem 0 .9rem}

@media (max-width:600px){
  .journal.journal-top{padding:14px 12px}
  .journal summary{font-size:16px;line-height:1.5}
}

.journal-body{margin-top:.65rem}
.journal-article-link{margin-inline-start:.75rem;color:var(--ink)}

.journal-cover {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  display: grid;
  align-content: center;
  gap: 5%;
  padding: 8%;
  margin: 1rem 0;
  overflow: hidden;
  border: 1px solid #5a4530;
  border-radius: .75rem;
  color: #fff4df;
  background:
    linear-gradient(110deg, #111722 28%, #11172230),
    repeating-linear-gradient(0deg, transparent 0 23px, #edb45a30 24px 25px),
    repeating-linear-gradient(90deg, transparent 0 23px, #edb45a30 24px 25px),
    radial-gradient(ellipse at right bottom, #8a462c, #191e30 70%);
}
.journal-cover > span { color: #ffc475; font-size: clamp(.65rem, 3.5cqi, 1.4rem); font-weight: 700; }
.journal-cover > strong {
  color: inherit;
  font-size: clamp(.8rem, 7cqi, 3.5rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.journal-cover {
  background: linear-gradient(90deg, #060d19a6, transparent 80%), url("/journal-cover.png") center / cover no-repeat #060d19;
}
.journal-cover > strong {
  max-width: 66%;
  font-size: clamp(.75rem, 5.5cqi, 3.2rem);
  text-shadow: 0 2px 6px #000;
}

#journalPosts .journal-cover {
  width: min(78%, 520px);
  margin-inline: auto;
}
@media (max-width: 600px) {
  #journalPosts .journal-cover { width: 90%; }
}

#journalPosts .journal-cover,
article > .journal-cover {
  width: min(74%, 360px);
  margin-inline: auto;
}