/* Home "From the journal": magazine layout — one large photo story with the text on the image,
   two compact stories beside it on a cream panel. Deliberately unlike the white stay cards above. */
#journal { background: #faf8f3; color: #312721; }
#journal .jn-wrap { max-width: 1240px; margin: auto; padding: 0 40px; }
#journal .jn-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
#journal .section-label { color: #a17b43; margin-bottom: 10px; }
#journal h2 { margin: 0; }
#journal .jn-all { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; padding: 12px 22px; border: 1px solid #c9b48f; border-radius: 999px; font-size: 13px !important; font-weight: 600; color: #4a3a2f; transition: background .25s, color .25s, border-color .25s; }
#journal .jn-all:hover { background: #3b3028; border-color: #3b3028; color: #fff8ec; }

#journal .jn-stories { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }

/* featured story: text sits on the photo */
#journal .jn-story-featured { position: relative; grid-row: span 2; min-height: 520px; border-radius: 22px; overflow: hidden; background: #2a1f18; isolation: isolate; }
#journal .jn-story-featured .jn-photo { position: absolute; inset: 0; z-index: -2; }
#journal .jn-story-featured::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,13,9,0) 30%, rgba(20,13,9,.55) 58%, rgba(20,13,9,.92) 100%); pointer-events: none; }
#journal .jn-story-featured .jn-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px; color: #f6efe2; }
#journal .jn-story-featured .jn-category { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(232,189,85,.92); color: #2a1c13 !important; margin-bottom: 16px; }
#journal .jn-story-featured h3:not(#_):not(#_) { font-size: 30px !important; line-height: 1.22 !important; margin: 0 0 12px; color: #fff !important; }
#journal .jn-story-featured h3 a { color: #fff; }
#journal .jn-story-featured p { margin: 0; max-width: 46ch; color: rgba(246,239,226,.86) !important; font-size: 15.5px !important; line-height: 1.7 !important; }
#journal .jn-story-featured .jn-meta { color: rgba(246,239,226,.72) !important; }
#journal .jn-story-featured .jn-read { color: #e8bd55 !important; }

/* side stories: photo left, text right, on a cream panel */
#journal .jn-story:not(.jn-story-featured) { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: center; padding: 18px; border-radius: 18px; background: #f2ece1; transition: background .25s; }
#journal .jn-story:not(.jn-story-featured):hover { background: #ece4d5; }
#journal .jn-story:not(.jn-story-featured) .jn-photo { aspect-ratio: 1 / 1; border-radius: 14px; }
#journal .jn-story:not(.jn-story-featured) h3:not(#_):not(#_) { font-size: 21px !important; line-height: 1.3 !important; margin: 0 0 10px; }
#journal .jn-story:not(.jn-story-featured) p { margin: 0; color: #6f665c; font-size: 14.5px !important; line-height: 1.65 !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

#journal .jn-photo { display: block; width: 100%; height: 100%; overflow: hidden; background: #e9e2d8; }
#journal .jn-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
#journal .jn-story:hover .jn-photo img { transform: scale(1.04); }
#journal .jn-category { font-size: 10.5px !important; line-height: 1.4; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; color: #92713e; margin-bottom: 8px; }
#journal .jn-story-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; }
#journal .jn-meta { font-size: 12px !important; color: #81786d; }
#journal .jn-read { display: inline-flex; gap: 8px; align-items: center; color: #4a3a2f; font-size: 12px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#journal h3 a:hover, #journal .jn-read:hover { color: #a57131; }
#journal a:focus-visible { outline: 2px solid #a57131; outline-offset: 4px; }

@media (max-width: 1023px) {
  #journal .jn-stories { grid-template-columns: 1fr; }
  #journal .jn-story-featured { grid-row: auto; min-height: 460px; }
}
@media (max-width: 767px) {
  #journal .jn-wrap { padding: 0 20px; }
  #journal .jn-header { display: block; margin-bottom: 24px; }
  #journal .jn-all { margin-top: 16px; }
  #journal .jn-story-featured { min-height: 420px; border-radius: 18px; }
  #journal .jn-story-featured .jn-copy { padding: 24px; }
  #journal .jn-story-featured h3:not(#_):not(#_) { font-size: 24px !important; }
  #journal .jn-story:not(.jn-story-featured) { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px; }
  #journal .jn-story:not(.jn-story-featured) h3:not(#_):not(#_) { font-size: 17px !important; }
  #journal .jn-story:not(.jn-story-featured) p, #journal .jn-story:not(.jn-story-featured) .jn-meta { display: none; }
  #journal .jn-story-bottom { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { #journal .jn-photo img { transition: none; } }