/* Approved photography-led Journal standard. Isolated from the grid and
   archived comparison layouts; shared fonts/links/navigation remain unchanged. */
.journal-article {
  --journal-paper:#f7f6f2;
  --journal-grey:#e5e6e3;
  --journal-ink:#202625;
  --crop-overlap:clamp(24px,5vw,80px);
  background:var(--journal-paper);
  color:var(--journal-ink);
}
.journal-article h1,.journal-article h2 { font-family:var(--display); font-weight:500; letter-spacing:-.025em; text-wrap:balance; }
.journal-article h1::before,.journal-article h1::after,.journal-article h2::before,.journal-article h2::after { content:none; }
.journal-article .bj-article-hero {
  position:relative;
  width:calc(100% - 2 * var(--gutter));
  max-width:1280px;
  aspect-ratio:16/9;
  height:auto;
  margin:0 auto;
  overflow:hidden;
}
.journal-article .bj-article-hero img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0%; }
/* Protect the inspected faces in the actual, more tightly framed originals. */
.journal-article [data-hero-family="portrait"] { aspect-ratio:4/3; }
.journal-article [data-hero-family="portrait"] img { object-position:50% 18%; }
.journal-article [data-hero-family="generationen"] { aspect-ratio:3/2; }
.journal-article .bj-title-panel {
  position:relative;
  z-index:1;
  width:calc(100% - 2 * var(--gutter) - 32px);
  max-width:1060px;
  margin:calc(-1 * var(--crop-overlap)) auto 0;
  padding:clamp(28px,4vw,55px);
  background:var(--journal-paper);
  text-align:center;
}
.journal-article .bj-card-category { margin:0 0 20px; font:500 1.125rem/1.5 var(--body); color:var(--petrol-text); }
.journal-article .bj-title-panel h1 { font-size:clamp(2.25rem,4.8vw,4.25rem); max-width:24ch; margin:0 auto; line-height:1.05; }
.journal-article .bj-article-body { width:calc(100% - 2 * var(--gutter)); max-width:1280px; margin:0 auto; padding:40px 0 76px; font:400 1.25rem/1.75 var(--body); }
.journal-article .bj-article-body > p,.journal-article .bj-article-body > h2,.journal-article .bj-article-body > section { max-width:720px; margin-inline:auto; }
.journal-article .bj-article-body p { margin-block:0 28px; }
.journal-article .bj-article-body .journal-intro { font-size:1.375rem; line-height:1.65; margin-bottom:42px; }
.journal-article .bj-article-body h2 { font-size:2.5rem; line-height:1.12; margin-block:50px 24px; }
.journal-article .bj-article-body a { color:var(--petrol-text); font-weight:600; }
.journal-article .bj-article-body a:hover { color:var(--journal-ink); }
.journal-article .article-photo-pair,.journal-article .article-photo-wide { width:100%; max-width:1280px; margin:clamp(48px,6vw,80px) auto; }
.journal-article .article-photo-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:clamp(16px,2vw,28px); }
.journal-article .article-photo-pair figure { margin:0; min-width:0; }
.journal-article .article-photo-pair img,.journal-article .article-photo-wide img { display:block; aspect-ratio:3/2; width:100%; height:auto; object-fit:cover; object-position:var(--photo-focus,50% 35%); }
.journal-article .article-photo-placeholder {
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:16px; aspect-ratio:3/2; padding:clamp(24px,3vw,40px); margin:0;
  text-align:center; background:var(--journal-grey); color:var(--journal-ink);
  font:400 1.125rem/1.6 var(--body);
}
.journal-article .article-photo-placeholder > span { display:block; max-width:34ch; }
.journal-article .article-photo-brief { font-weight:600; }
.journal-article .article-photo-wide .article-photo-placeholder > span { max-width:48ch; }
/* Missing originals are real text blocks, not broken images. Text may expand
   these boxes at narrow widths / large text settings without being cropped. */
.journal-article .bj-article-hero--open { aspect-ratio:auto; overflow:visible; }
.journal-article .article-hero-placeholder { aspect-ratio:16/9; min-height:280px; padding-bottom:calc(clamp(24px,3vw,40px) + var(--crop-overlap)); }
.journal-article .article-hero-placeholder > span { max-width:48ch; }
.journal-article .bj-article-body .journal-related { margin-top:60px; padding:0; }
.journal-article .journal-related h2 { margin-top:0; }
.journal-article .journal-related ul { list-style:none; padding:0; margin:0; display:grid; gap:20px; }
.journal-article .journal-related li { padding:0; margin:0; }
.journal-article .journal-related a { display:inline-block; padding-block:4px; }
.journal-article .bj-article-back { margin:40px auto 0; max-width:720px; display:flex; align-items:center; min-height:48px; font-size:1.125rem; }
@media(max-width:700px) {
  .journal-article { --crop-overlap:24px; }
  .journal-article .bj-article-hero { aspect-ratio:4/3; }
  .journal-article [data-hero-family="portrait"] { aspect-ratio:4/5; }
  .journal-article .bj-article-hero--open { aspect-ratio:auto; }
  .journal-article .article-hero-placeholder { aspect-ratio:4/3; }
  .journal-article .bj-title-panel { padding:24px 20px 28px; }
  .journal-article .bj-title-panel h1 { font-size:clamp(2rem,7.8vw,2.75rem); }
  .journal-article .bj-card-category { margin-bottom:14px; }
  .journal-article .bj-article-body { font-size:1.125rem; line-height:1.75; padding:28px 0 60px; }
  .journal-article .bj-article-body .journal-intro { font-size:1.25rem; line-height:1.65; margin-bottom:32px; }
  .journal-article .bj-article-body h2 { font-size:2.125rem; margin-block:40px 22px; }
  .journal-article .article-photo-pair { grid-template-columns:1fr; gap:24px; }
  .journal-article .article-photo-placeholder { gap:12px; }
}