.journal-page { background: var(--portal-cream); }
.journal-main { width: min(100%, 1240px); margin: 0 auto; padding: 38px 40px 64px; }
.journal-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .55fr); align-items: end; gap: 40px; }
.journal-intro h1 { max-width: 700px; margin: 8px 0 0; color: var(--portal-ink); font-size: 36px; font-weight: 700; letter-spacing: -.025em; line-height: 40px; }
.journal-intro-note { max-width: 390px; margin: 0 0 4px; }
.journal-intro-note > p { margin: 0; color: var(--portal-soft); font-size: 16px; line-height: 24px; }
.journal-intro-note > div { display: flex; gap: 18px; margin-top: 14px; color: #9a6b18; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; }
.journal-topics { display: flex; gap: 24px; margin-top: 30px; padding: 0 0 15px; border-bottom: 1px solid var(--portal-line); }
.journal-topics a { position: relative; color: var(--portal-muted); font-size: 14px; font-weight: 600; line-height: 20px; text-decoration: none; }
.journal-topics a[aria-current="page"] { color: var(--portal-ink); }
.journal-topics a[aria-current="page"]::after { position: absolute; right: 0; bottom: -16px; left: 0; height: 2px; background: var(--portal-gold); content: ""; }
.journal-feature { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); min-height: 350px; margin-top: 24px; overflow: hidden; border: 1px solid var(--portal-line); border-radius: 18px; color: inherit; background: var(--portal-surface); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.journal-feature:hover { border-color: rgba(154, 107, 24, .42); transform: translateY(-2px); }
.journal-feature-media { position: relative; display: block; min-height: 350px; overflow: hidden; background: var(--portal-pine); }
.journal-feature-media img { display: block; width: 100%; height: 100%; min-height: 350px; object-fit: cover; transition: transform .45s ease; }
.journal-feature-media:hover img { transform: scale(1.025); }
.journal-feature-media > span { position: absolute; top: 18px; left: 18px; padding: 8px 11px; border-radius: 999px; color: var(--portal-ink); background: rgba(255,254,249,.92); font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; }
.journal-feature-copy { display: flex; flex-direction: column; justify-content: center; padding: 32px 36px; }
.journal-meta { display: flex; justify-content: space-between; gap: 14px; color: #9a6b18; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: .05em; text-transform: uppercase; }
.journal-feature h2 { margin: 12px 0 0; color: var(--portal-ink); font-size: 24px; font-weight: 700; letter-spacing: -.025em; line-height: 30px; }
.journal-feature-copy > p { margin: 14px 0 0; color: var(--portal-soft); font-size: 14px; line-height: 22px; }
.journal-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 18px; color: var(--portal-ink); font-size: 14px; font-weight: 700; line-height: 20px; text-decoration: none; }
.journal-link:hover { color: #8b6218; }
.journal-section { margin-top: 62px; }
.journal-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--portal-line); }
.journal-section-head h2, .journal-cta h2 { margin: 8px 0 0; color: var(--portal-ink); font-size: 28px; font-weight: 700; letter-spacing: -.025em; line-height: 34px; }
.journal-section-head > span { margin-bottom: 3px; color: var(--portal-muted); font-size: 14px; line-height: 20px; }
.journal-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.journal-row { display: flex; min-width: 0; overflow: hidden; flex-direction: column; padding: 0; border: 1px solid var(--portal-line); border-radius: 14px; color: inherit; background: var(--portal-surface); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.journal-row:hover { border-color: rgba(154, 107, 24, .42); transform: translateY(-2px); }
.journal-row-media { display: block; height: 176px; overflow: hidden; border-radius: 0; background: var(--portal-pine); }
.journal-row-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.journal-row:hover .journal-row-media img { transform: scale(1.03); }
.journal-row-copy { display: flex; min-height: 238px; flex: 1; flex-direction: column; padding: 18px 19px 20px; }
.journal-row-copy .journal-meta { justify-content: flex-start; gap: 16px; }
.journal-row h3 { margin: 12px 0 0; color: var(--portal-ink); font-size: 20px; letter-spacing: -.02em; line-height: 28px; }
.journal-summary { display: block; margin: 10px 0 0; color: var(--portal-soft); font-size: 14px; line-height: 22px; }
.journal-row .journal-link { margin-top: auto; padding-top: 18px; white-space: nowrap; }
.journal-media-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; margin-top: 24px; }
.journal-media-card { position: relative; display: block; min-height: 270px; margin: 0; overflow: hidden; border-radius: 14px; color: #fff; background: var(--portal-pine); text-decoration: none; }
.journal-media-card img, .journal-media-card video { display: block; width: 100%; height: 100%; min-height: 270px; object-fit: cover; }
.journal-media-card video { background: #06140e; }
.journal-media-card::after { position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, transparent, rgba(6,20,14,.86)); content: ""; pointer-events: none; }
.journal-media-card figcaption, .journal-media-caption { position: absolute; z-index: 1; right: 18px; bottom: 17px; left: 18px; display: block; color: #fff; }
.journal-media-card figcaption > span, .journal-media-caption > span { display: block; color: #efbc55; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: .05em; text-transform: uppercase; }
.journal-media-card figcaption a { color: inherit; text-decoration: none; }
.journal-media-card figcaption strong, .journal-media-caption strong { display: block; margin-top: 6px; font-size: 20px; letter-spacing: -.02em; line-height: 28px; }
.journal-media-card figcaption small, .journal-media-caption small { display: block; margin-top: 6px; color: rgba(255,255,255,.78); font-size: 12px; font-weight: 600; line-height: 16px; }
.journal-media-card--video::after { pointer-events: none; }
.journal-media-card--video video { position: relative; z-index: 2; }
.journal-media-card--video figcaption { z-index: 3; right: 56px; pointer-events: none; }
.journal-media-card--video figcaption a { pointer-events: auto; }
.journal-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 62px; padding: 27px 30px; border: 1px solid var(--portal-line); border-radius: 16px; background: var(--portal-surface); }
.journal-cta .portal-button { flex: 0 0 auto; }
@media (max-width: 900px) { .journal-intro { grid-template-columns: 1fr; gap: 20px; } .journal-feature { grid-template-columns: 1fr; } .journal-feature-media, .journal-feature-media img { min-height: 360px; } .journal-feed { grid-template-columns: 1fr 1fr; } .journal-row:last-child { grid-column: 1 / -1; } .journal-media-grid { grid-template-columns: 1fr 1fr; } .journal-media-card:first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .journal-main { padding: 26px 16px 50px; } .journal-intro h1 { font-size: 32px; line-height: 38px; letter-spacing: -.025em; } .journal-intro-note > p { font-size: 15px; line-height: 24px; } .journal-intro-note > div { margin-top: 12px; font-size: 11px; line-height: 16px; } .journal-topics { gap: 18px; margin-top: 24px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; } .journal-feature { min-height: 0; margin-top: 16px; } .journal-feature-media, .journal-feature-media img { min-height: 210px; } .journal-feature-copy { padding: 20px 18px 22px; } .journal-feature h2 { font-size: 22px; line-height: 28px; } .journal-feature-copy > p { margin-top: 12px; font-size: 14px; line-height: 22px; } .journal-section { margin-top: 44px; } .journal-section-head { align-items: start; flex-direction: column; gap: 6px; } .journal-section-head h2, .journal-cta h2 { font-size: 24px; line-height: 30px; } .journal-feed { display: flex; margin: 18px -16px 0; padding: 0 16px 5px; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .journal-feed::-webkit-scrollbar { display: none; } .journal-row, .journal-row:last-child { grid-column: auto; flex: 0 0 min(82vw, 318px); scroll-snap-align: start; } .journal-row-media { height: 156px; } .journal-row-copy { min-height: 230px; padding: 17px 17px 19px; } .journal-row h3 { font-size: 18px; line-height: 24px; } .journal-row-copy > p { font-size: 14px; line-height: 22px; } .journal-row .journal-link { padding-top: 15px; font-size: 13px; line-height: 18px; } .journal-meta { gap: 8px; font-size: 11px; line-height: 16px; } .journal-media-grid { display: flex; margin: 18px -16px 0; padding: 0 16px 5px; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .journal-media-grid::-webkit-scrollbar { display: none; } .journal-media-card:first-child { grid-column: auto; } .journal-media-card, .journal-media-card img, .journal-media-card video { min-height: 205px; } .journal-media-card { flex: 0 0 min(84vw, 326px); scroll-snap-align: start; } .journal-cta { align-items: stretch; flex-direction: column; margin-top: 44px; padding: 22px 18px; } .journal-cta .portal-button { width: 100%; } }