.home .wrap { padding-block: var(--s5) var(--s6); }
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr); align-items: center; gap: var(--s6); }
.hero .date { margin-block: 0 var(--s3); }
.hero h1 { font-size: clamp(2.6rem, 4.7vw, 4.4rem); max-width: 18ch; margin-block-end: var(--s3); }
.hero .lead { max-width: 47ch; }
.hero .art { transform: rotate(2deg); margin: var(--s4) .5rem; }
.answer { border-left: 4px solid var(--blue); padding: var(--s2) var(--s3); max-width: 50ch; }
.answer p { margin-block: 0 var(--s2); }
.answer p:last-child { font-size: var(--small-size); color: var(--muted); margin: 0; }
.index { margin-block-start: var(--s6); }
.index > p { max-width: var(--read); }
.journal { list-style: none; padding: 0; margin-block: var(--s4) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); }
.journal li { margin: 0; padding: 0; border-top: 1px solid var(--line); }
.journal li a { display: flex; align-items: center; gap: var(--s3); justify-content: space-between; color: var(--ink); text-decoration: none; padding-block: var(--s3); min-height: 7rem; width: 100%; }
.journal a > span:first-child { min-width: 0; }
.journal strong { font-family: var(--book); font-size: 1.35rem; font-weight: 500; display: block; color: var(--blue-deep); line-height: 1.3; margin-block-end: .5rem; }
.journal strong + span { display: block; font-size: var(--small-size); color: var(--muted); line-height: 1.6; max-width: 45ch; }
.journal .arr { flex-shrink: 0; color: var(--blue); }
.journal a:hover strong { text-decoration: underline; text-underline-offset: .2em; }
.closing { max-width: var(--read); margin-block-start: var(--s6); padding: var(--s4); background: var(--white); border-radius: var(--r2); border-top: 3px solid var(--blue); }
@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; gap: var(--s3); }
  .hero h1 { max-width: 19ch; }
  .hero .art { transform: none; margin: 0; width: min(100%, 32rem); }
  .journal { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .home .wrap { padding-block-start: var(--s4); }
  .hero h1 { font-size: 2.6rem; max-width: 100%; }
  .answer { padding-inline: var(--s2); }
  .closing { padding: var(--s3); }
}