/* Journal — scrolling pages that sit on top of the base theme in app.css */
html:has(body.scroll), body.scroll { height: auto; min-height: 100%; overflow: auto; }

.journal {
  max-width: 680px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + clamp(32px, 8vh, 80px)) var(--px) 96px;
}
.journal-head { text-align: center; margin-bottom: clamp(32px, 6vh, 56px); }
.journal-head .page-sub { max-width: 480px; margin: 0 auto; }

.journal-empty { text-align: center; color: var(--muted); font-size: 13px; }

.journal-list { list-style: none; border-top: 1px solid var(--border); }
.journal-item {
  display: block; padding: 28px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text); text-decoration: none;
  transition: color 0.2s ease;
}
.journal-item:hover h2 { color: var(--accent); }
.journal-item time, .journal-meta {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.journal-item h2 {
  font-family: 'Cormorant Garant', serif; font-weight: 300;
  font-size: clamp(22px, 3vw, 30px); line-height: 1.25; margin: 8px 0 6px;
  transition: color 0.2s ease;
}
.journal-item p { font-size: 13px; line-height: 1.7; color: var(--muted); }

.journal-back {
  display: inline-block; margin-bottom: 28px;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color 0.2s ease;
}
.journal-back:hover { color: var(--accent); }
.journal-post header { margin-bottom: 40px; }
.journal-post .page-title { margin-bottom: 12px; }

.journal-body { font-size: 15px; line-height: 1.9; color: var(--text); }
.journal-body > * + * { margin-top: 1.4em; }
.journal-body h2, .journal-body h3, .journal-body h4 {
  font-family: 'Cormorant Garant', serif; font-weight: 300; line-height: 1.25; margin-top: 2em;
}
.journal-body h2 { font-size: 28px; }
.journal-body h3 { font-size: 22px; }
.journal-body h4 { font-size: 18px; }
.journal-body a { color: var(--accent); text-underline-offset: 3px; }
.journal-body ul, .journal-body ol { padding-left: 1.4em; }
.journal-body li + li { margin-top: 0.4em; }
.journal-body blockquote {
  border-left: 1px solid var(--accent); padding-left: 20px;
  font-family: 'Cormorant Garant', serif; font-style: italic; font-size: 22px; line-height: 1.5;
}
.journal-body hr { border: 0; border-top: 1px solid var(--border); }
.journal-body img { max-width: 100%; height: auto; display: block; }
.journal-body code { font-size: 0.9em; background: var(--surface); padding: 2px 6px; }
.journal-body pre { background: var(--surface); padding: 16px 20px; overflow-x: auto; }
.journal-body pre code { background: none; padding: 0; }