.journal-breadcrumb{display:flex;gap:.75rem;padding-block:1.5rem;font-size:0.875rem;color:var(--text-muted)}
.journal-index-header{display:grid;grid-template-columns:1.1fr 1fr;align-items:end;gap:3rem;padding-block:1.25rem 2rem;border-bottom:1px solid var(--line)}
.journal-index-header h1{font-size:clamp(2.75rem,5.5vw,6rem);line-height:.98;letter-spacing:-.04em;margin:0;font-weight:450}
.journal-lead{font-size:clamp(1.15rem,1.7vw,1.6rem);line-height:1.5;max-width:38em}
.journal-index-header .journal-lead{margin:0}
.journal-index,.journal-related{padding-block:3rem 5rem}
.journal-filter{display:flex;flex-wrap:wrap;gap:.4rem 1.8rem;margin-bottom:2rem;border-bottom:1px solid var(--line)}
.journal-filter a{padding-block:.9rem;min-height:44px;text-decoration:none;border-bottom:2px solid transparent}
.journal-filter a[aria-current]{border-color:var(--gold);color:var(--gold-text)}
.journal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem 2rem}
.journal-card{min-width:0}.journal-card-photo{display:block;background:var(--graphite);aspect-ratio:4/3;overflow:hidden}
/* A card shows a cover, so it fills its frame; the article page shows the whole photo. */
.journal-card-photo picture,.journal-card-photo img{display:block;width:100%;height:100%;object-fit:cover}
.journal-kind{font-size:0.8125rem;color:var(--text-muted);margin:.6rem 0 .75rem}
.journal-card :is(h2,h3){font-size:clamp(1.3rem,1.8vw,1.9rem);line-height:1.22;letter-spacing:-.035em;margin:0 0 .75rem;font-weight:500;hyphens:auto}
.journal-related .journal-card-photo+:is(h2,h3){margin-top:1rem}
.journal-card :is(h2,h3) a{text-decoration:none}.journal-card :is(h2,h3) a:hover{text-decoration:underline;text-underline-offset:.2em}
.journal-card>p:last-child{font-size:1rem;line-height:1.6;margin:0;color:var(--text-muted)}
.journal-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;margin-bottom:2rem}
.journal-section-heading h2{font-size:clamp(2rem,4vw,3.75rem);letter-spacing:-.04em;margin:0}
.journal-article-header{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center;padding-block:2rem 4rem}
.journal-article-header h1{font-size:clamp(2.6rem,4.3vw,5rem);line-height:1.04;letter-spacing:-.04em;margin:.75rem 0 1.5rem;hyphens:auto;font-weight:500}
.journal-article-header figure{margin:0;min-width:0}.journal-article-header picture{display:block;background:var(--graphite)}
.journal-article-header img{width:100%;height:clamp(22rem,40vw,38rem);object-fit:contain;display:block}
.journal-article-header figcaption,.journal-byline,.journal-source{font-size:0.875rem;line-height:1.5;color:var(--text-muted)}
.journal-article-header figcaption{margin-top:.65rem}.journal-byline{margin-top:1.5rem}
.journal-reading{display:grid;grid-template-columns:minmax(0,46rem) minmax(14rem,22rem);justify-content:center;gap:clamp(2rem,7vw,8rem);padding-bottom:3rem}
.journal-body{font-size:1.125rem;line-height:1.8;min-width:0}.journal-body p{margin:0 0 1.4rem}
.journal-body h2{font-size:clamp(1.75rem,2.4vw,2.5rem);line-height:1.18;letter-spacing:-.035em;margin:2.6rem 0 1rem;hyphens:auto}
.journal-body h2:first-child{margin-top:0}.journal-body h3{font-size:1.18rem;line-height:1.4;margin:1.5rem 0 .75rem}
.journal-next{align-self:start;border-top:1px solid var(--line-strong);padding-top:1.4rem}.journal-next h2{font-size:1.35rem;margin:0 0 1rem}.journal-next p{line-height:1.6;color:var(--text-muted)}
.journal-next .button{width:100%;justify-content:space-between}.journal-next>.text-link{display:inline-flex;margin-top:1.25rem}
.journal-facts{border-top:1px solid var(--line);margin-top:2.5rem;padding-top:2rem}.journal-fact{border-bottom:1px solid var(--line);padding-bottom:1.5rem}.journal-fact dl{margin:0 0 1rem}.journal-fact dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-block:.55rem}.journal-fact dd{margin:0;flex-shrink:0;font-variant-numeric:tabular-nums}.journal-source{margin-top:1.5rem!important}.journal-fact .text-link{font-size:0.9375rem}
@media(max-width:1023px){.journal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.journal-article-header{gap:2rem}.journal-reading{gap:2.5rem;grid-template-columns:minmax(0,1fr) 15rem}}
@media(max-width:767px){.journal-index-header,.journal-article-header,.journal-reading{grid-template-columns:minmax(0,1fr);gap:1.5rem}.journal-index-header{padding-block:1.5rem 2.5rem}.journal-article-header{padding-block:0 2.5rem}.journal-article-header h1{font-size:clamp(2.3rem,8.5vw,3.8rem)}.journal-article-header img{height:auto;max-height:32rem}.journal-section-heading{align-items:start;flex-direction:column;gap:.8rem}.journal-next{margin-top:1rem}.journal-index,.journal-related{padding-block:2rem 3rem}.journal-reading{padding-bottom:1rem}}
@media(max-width:599px){.journal-grid{grid-template-columns:1fr;gap:2.5rem}.journal-card-photo{aspect-ratio:4/3}.journal-card :is(h2,h3){font-size:1.6rem}.journal-fact dl>div{flex-direction:column;gap:.2rem}.journal-fact dd{font-size:0.9375rem}.journal-filter{gap:0 1.1rem;font-size:0.875rem}}

.journal-index .journal-card{display:flex;flex-direction:column}
.journal-index .journal-card>h2{order:-1;min-block-size:2.5em;margin:0 0 1rem}
@media(max-width:767px){.journal-index-header{gap:1rem;padding-block:1rem 1.5rem}.journal-index .journal-card>h2{min-block-size:0}}
/* The whole card opens the article: the title link's area covers the card, so the photograph,
   kind and summary are part of one 44px+ target and the duplicate photo link is never hit. */
.journal-card{position:relative}.journal-card :is(h2,h3) a::after{content:'';position:absolute;inset:0}
.journal-card:has(:is(h2,h3) a:focus-visible){outline:2px solid var(--gold-text);outline-offset:4px}.journal-card :is(h2,h3) a:focus-visible{outline:0}

.journal-article-header > * { min-width: 0; }