.journal {
    --journal-surface: oklch(99% .004 85);
    color: var(--pf-ink);
    font-family: var(--pf-body);
}
.journal a { text-underline-offset: .25em; }
.journal a:focus-visible, .journal button:focus-visible { outline-offset: 4px; }
.journal-section { padding-block: 32px; }
.journal-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--pf-line); padding-bottom: 14px; margin-bottom: 24px; }
.journal-section-head h2 { font-size: 22px; font-weight: 700; }
.journal-section-head a, .journal-back { font-size: 14px; color: var(--pf-muted); padding-block: 10px; }
.journal-section-head a:hover, .journal-back:hover { color: var(--pf-ink); text-decoration: underline; }
.journal-category { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--pf-ink); }
.journal-category::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--category-color, var(--pf-accent)); flex-shrink: 0; }
.journal-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; line-height: 1.7; color: var(--pf-muted); }
.journal-pin { font-size: 12px; padding: 2px 8px; border: 1px solid var(--pf-line); border-radius: 4px; color: var(--pf-muted); }
.journal-title { overflow-wrap: anywhere; text-wrap: pretty; }
.journal-link:hover .journal-title { text-decoration: underline; text-decoration-thickness: 1px; }
.journal-latest { border-bottom: 1px solid var(--pf-line); background: var(--journal-surface); }
.journal-latest .pf-container { display: flex; align-items: center; gap: 16px; }
.journal-latest-label { font-size: 12px; font-weight: 700; flex-shrink: 0; color: var(--pf-gold-ink); }
.journal-latest-links { display: flex; align-items: center; gap: 28px; overflow-x: auto; min-width: 0; padding-block: 13px; font-size: 13px; scrollbar-width: thin; }
.journal-latest-links a { flex-shrink: 0; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pf-muted); }
.journal-latest-links a:hover { color: var(--pf-ink); }
.journal-intro { max-width: 48rem; padding-block: 24px 0; }
.journal-hero { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.journal-lead { min-width: 0; }
.journal-lead-image { overflow: hidden; aspect-ratio: 16 / 9; background: var(--pf-line); border-radius: 5px; }
.journal-lead-image img { width: 100%; height: 100%; object-fit: cover; }
.journal-lead-copy { padding-block: 0 12px; }
.journal-lead > .journal-meta { padding-top: 16px; }
.journal-lead h2 { font-size: clamp(26px, 2.8vw, 36px); font-weight: 700; line-height: 1.45; margin-block: 10px; }
.journal-lead p { font-size: 16px; line-height: 1.9; color: var(--pf-muted); margin-bottom: 14px; max-width: 60ch; }
.journal-secondary { min-width: 0; }
.journal-secondary > h2 { font-size: 17px; font-weight: 700; padding-bottom: 14px; border-bottom: 2px solid var(--pf-ink); }
.journal-story { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 16px; padding-block: 20px; border-bottom: 1px solid var(--pf-line); align-items: start; }
.journal-story-copy { min-width: 0; }
.journal-story h3 { font-size: 18px; font-weight: 600; line-height: 1.7; margin-block: 5px 9px; }
.journal-story img { width: 96px; height: 96px; object-fit: cover; border-radius: 4px; }
.journal-story:not(:has(img)) { grid-template-columns: 1fr; }
.journal-body-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 40px; padding-block: 16px 64px; }
.journal-story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.journal-story-grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; margin-bottom: 16px; }
.journal-story-grid h3 { font-size: 21px; font-weight: 600; line-height: 1.65; margin-block: 8px; }
.journal-story-grid p { color: var(--pf-muted); font-size: 15px; line-height: 1.9; margin-bottom: 12px; }
.journal-list { margin-top: 20px; }
.journal-list .journal-story { grid-template-columns: minmax(0, 1fr) 140px; padding-block: 24px; }
.journal-list .journal-story img { width: 140px; height: 108px; }
.journal-list .journal-story:not(:has(img)) { grid-template-columns: 1fr; }
.journal-sidebar { min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.journal-sidebar h2 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.journal-ranked { counter-reset: stories; }
.journal-ranked li { display: flex; gap: 16px; border-bottom: 1px solid var(--pf-line); padding-block: 12px; align-items: baseline; }
.journal-ranked span { font-size: 20px; color: var(--pf-gold-ink); min-width: 20px; }
.journal-ranked a { font-size: 15px; line-height: 1.8; }
.journal-ranked a:hover { text-decoration: underline; }
.journal-invite { background: var(--pf-ink); color: var(--journal-surface); padding: 28px; border-radius: 5px; }
.journal-invite p { font-size: 15px; line-height: 1.9; opacity: .85; margin-bottom: 20px; }
.journal-invite .journal-cta { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 8px 18px; background: var(--pf-accent); color: var(--pf-ink); border-radius: 5px; font-size: 14px; font-weight: 700; }
.journal-archive-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.journal-archive-images img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.journal-empty { padding: 64px 20px; text-align: center; border-block: 1px solid var(--pf-line); }
.journal-empty h2 { font-size: 24px; font-weight: 600; margin-bottom: 12px; }
.journal-empty p { color: var(--pf-muted); line-height: 1.9; margin-bottom: 24px; }
.journal-empty a { display: inline-flex; align-items: center; min-height: 44px; color: var(--pf-gold-ink); font-weight: 600; text-decoration: underline; }
.journal-page-head { padding-block: 36px 24px; }
.journal-page-head h1 { font-size: clamp(28px, 3vw, 40px); font-weight: 700; line-height: 1.5; }
.journal-page-head p { font-size: 15px; color: var(--pf-muted); margin-top: 8px; }
.journal-filters { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-block: 4px 16px; border-bottom: 1px solid var(--pf-line); margin-bottom: 8px; scrollbar-width: thin; }
.journal-filters a { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; flex-shrink: 0; padding: 8px 16px; border: 1px solid var(--pf-line); border-radius: 6px; font-size: 14px; background: var(--journal-surface); color: var(--pf-muted); }
.journal-filters a[aria-current] { background: var(--pf-ink); border-color: var(--pf-ink); color: var(--journal-surface); }
.journal-filters a:hover { border-color: var(--pf-ink); }
.journal-feed { max-width: 58rem; margin-inline: auto; }
.journal-feed-item { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 28px; padding-block: 28px; border-bottom: 1px solid var(--pf-line); }
.journal-feed-item:not(:has(img)) { grid-template-columns: 1fr; }
.journal-feed-item img { width: 200px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; }
.journal-feed-item h2 { font-size: 23px; font-weight: 600; line-height: 1.6; margin-block: 10px; }
.journal-feed-item p { font-size: 15px; line-height: 1.9; color: var(--pf-muted); margin-bottom: 10px; }
.journal-pagination { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 28px 52px; font-size: 14px; color: var(--pf-muted); }
.journal-pagination a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--pf-line); border-radius: 6px; color: var(--pf-ink); }
.journal-article { padding-block: 32px 64px; }
.journal-article-head { max-width: 48rem; margin-inline: auto; padding-block: 28px 32px; }
.journal-article-head h1 { font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; line-height: 1.55; margin-block: 16px 20px; }
.journal-byline { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--pf-line); color: var(--pf-muted); font-size: 14px; }
.journal-byline strong { color: var(--pf-ink); font-weight: 500; }
.journal-article-image { max-width: 62rem; margin: 0 auto 40px; }
.journal-article-image img { width: 100%; height: auto; max-height: 620px; object-fit: contain; background: var(--pf-line); border-radius: 5px; }
.journal-richtext { max-width: 44rem; margin-inline: auto; font-size: 18px; line-height: 2; color: var(--pf-ink); overflow-wrap: anywhere; }
.journal-richtext p { margin-block: 0 1.25em; }
.journal-richtext :is(h2, h3, h4) { font-weight: 700; line-height: 1.6; margin-block: 1.8em .6em; }
.journal-richtext h2 { font-size: 1.55em; }
.journal-richtext h3 { font-size: 1.25em; }
.journal-richtext h4 { font-size: 1.1em; }
.journal-richtext :is(ul, ol) { padding-inline-start: 1.5em; margin-block: 1em 1.5em; }
.journal-richtext ul { list-style-type: disc; }
.journal-richtext ol { list-style-type: decimal; }
.journal-richtext li { padding-inline-start: .3em; margin-block: .4em; }
.journal-richtext a { color: var(--pf-gold-ink); text-decoration: underline; }
.journal-richtext blockquote { margin-block: 2em; padding: 20px 28px; border: 1px solid var(--pf-line); border-radius: 4px; background: var(--journal-surface); font-size: 1.1em; }
.journal-richtext blockquote p:last-child { margin-bottom: 0; }
.journal-richtext img { max-width: 100%; height: auto; margin-block: 24px; }
.journal-richtext hr { border: 0; border-top: 1px solid var(--pf-line); margin-block: 2em; }
.journal-richtext table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 16px; }
.journal-richtext :is(td, th) { padding: 10px 16px; border: 1px solid var(--pf-line); text-align: start; }
.journal-richtext iframe { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; }
.journal-richtext .responsive-object { position: relative; }
.journal-richtext .responsive-object iframe { position: absolute; inset: 0; height: 100%; }
.journal-article-end { max-width: 44rem; margin: 36px auto 0; padding-top: 24px; border-top: 1px solid var(--pf-line); }
.journal-related { border-top: 1px solid var(--pf-line); padding-block: 32px 48px; }
.journal-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.journal-related h3 { font-size: 20px; font-weight: 600; line-height: 1.7; margin-block: 10px; }
.journal-related img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; margin-bottom: 14px; border-radius: 4px; }
.journal-footer { border-top: 1px solid var(--pf-line); padding-block: 20px; color: var(--pf-muted); font-size: 13px; }
.journal-footer .pf-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.journal-footer nav { display: flex; align-items: center; gap: 24px; }
.journal-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.journal-footer a:hover { text-decoration: underline; }
@media (max-width: 767px) {
    .journal-section { padding-block: 24px; }
    .journal-hero, .journal-body-grid { grid-template-columns: 1fr; gap: 28px; }
    .journal-secondary > h2 { margin-top: 8px; }
    .journal-lead-copy { padding-top: 0; }
    .journal-lead h2 { font-size: 27px; }
    .journal-story h3 { font-size: 17px; }
    .journal-story, .journal-list .journal-story { grid-template-columns: minmax(0, 1fr) 88px; gap: 14px; }
    .journal-story img, .journal-list .journal-story img { width: 88px; height: 88px; }
    .journal-body-grid { padding-bottom: 40px; }
    .journal-sidebar { padding-top: 24px; border-top: 1px solid var(--pf-line); }
    .journal-page-head { padding-block: 28px 20px; }
    .journal-feed-item { grid-template-columns: minmax(0, 1fr) 88px; gap: 14px; padding-block: 24px; }
    .journal-feed-item img { width: 88px; height: 88px; }
    .journal-feed-item h2 { font-size: 18px; margin-block: 7px; }
    .journal-feed-item p { display: none; }
    .journal-feed-item .journal-meta { font-size: 12px; gap: 6px 12px; }
    .journal-article { padding-top: 20px; }
    .journal-article-head { padding-block: 20px 24px; }
    .journal-article-image { margin-bottom: 28px; }
    .journal-richtext { font-size: 17px; line-height: 1.95; }
    .journal-richtext blockquote { padding: 16px; }
    .journal-related-grid { grid-template-columns: 1fr; gap: 24px; }
    .journal-related-grid article + article { padding-top: 24px; border-top: 1px solid var(--pf-line); }
}
@media (max-width: 479px) {
    .journal-story-grid { grid-template-columns: 1fr; }
    .journal-pagination { font-size: 12px; gap: 8px; }
    .journal-pagination a { padding-inline: 12px; }
}