/* Image credits: an editorial article on the Concept H shell.
   Page-scoped. Loaded after the shared stylesheets, which are untouched. */

.credits-main {
  padding-block: clamp(28px, 3vw, 40px) clamp(56px, 6vw, 88px);
  background: linear-gradient(180deg, #f2f7fb 0, #fff 380px);
}
.credits-article {
  --credit-row-padding: 16px;
  --credit-entry-gap: 32px;
  --credit-section-gap: 48px;
  width: min(var(--wrap), calc(100% - 2 * var(--gutter))); margin-inline: auto;
}
.credits-article :where(h1, h2, h3, p, dl, dd, figure) { margin: 0; }

/* Compact title/synopsis and one separator, adapted from Northern Star's
   .page-header__text and Rio Tinto / BHP utility pages. Fable recommended
   removing both the eyebrow and contents row. Verified source evidence:
   ../research/2026-10-01/{industry-source-audit,fable-header-footer-review}.md. */
.credits-header { padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.credits-header h1 {
  color: var(--navy); font-size: clamp(32px, 2.6vw, 38px); font-weight: 600; line-height: 1.15; letter-spacing: -.024em;
}
.credits-standfirst { margin-top: 16px; color: var(--muted); font-size: 16px; line-height: 1.625; text-wrap: initial; }

/* Headings rely on type and spacing rather than another decorative rule. */
.credits-section { padding-top: 32px; }
.credits-section + .credits-section { margin-top: var(--credit-section-gap); padding-top: var(--credit-section-gap); border-top: 1px solid var(--rule); }
.credits-section > h2 {
  color: var(--navy); font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; line-height: 1.15; letter-spacing: -.024em;
}
.credits-section > p { max-width: 66ch; margin-top: 16px; font-size: 16.5px; line-height: 1.65; text-wrap: pretty; }
.credits-section > p + p { margin-top: 16px; }
.credits-section > p a { color: var(--blue-ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.credits-section > p a:hover { color: var(--navy); }

/* Figures share equal spacing on either side of their separators. */
.credit-figure {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
  gap: 24px clamp(32px, 4vw, 48px); align-items: start;
  margin-top: 24px;
}
.credit-figure-portrait { grid-template-columns: minmax(0, 5fr) minmax(280px, 7fr); }
.credit-figure + .credit-figure, .credit-figure + p { margin-top: var(--credit-entry-gap); padding-top: var(--credit-entry-gap); border-top: 1px solid var(--rule); }
.credit-image {
  position: relative; overflow: hidden; background: #142b42;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.credit-image img { display: block; width: 100%; height: auto; }
.credit-figure figcaption { min-width: 0; }
.credit-figure h3 { color: var(--navy); font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; text-wrap: balance; }
.credit-summary { margin-top: 16px; color: var(--text); font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }
.credit-details { display: grid; margin-top: 24px; border-top: 1px solid var(--rule); }
.credit-details > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: var(--credit-row-padding) 0; border-bottom: 1px solid var(--rule); }
.credit-details dt { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 21px; }
.credit-details dd { color: var(--text); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.credit-details a { color: var(--blue-ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.credit-details a:hover { color: var(--navy); }

/* Understated way back. */
.credits-return {
  display: inline-flex; align-items: center; gap: 16px; min-height: 44px; margin-top: var(--credit-section-gap);
  color: var(--blue-ink); font-size: 14.5px; font-weight: 550;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: #7ba9ca;
}
.credits-return .ui-icon { width: 18px; height: 18px; transform: rotate(180deg); transition: transform .2s; }
.credits-return:hover { color: var(--navy); text-decoration-color: currentColor; }
.credits-return:hover .ui-icon { transform: rotate(180deg) translateX(4px); }

@media (max-width: 900px) {
  .credits-article { --credit-section-gap: 32px; }
  .credit-figure, .credit-figure-portrait { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .credit-figure-portrait .credit-image { max-width: 440px; }
}
@media (max-width: 760px) {
  .credit-details > div { grid-template-columns: 88px minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .credit-details > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .credit-details dt { line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  .credits-return .ui-icon { transition: none; }
}
@media (forced-colors: active) {
  .credit-image { clip-path: none; border: 1px solid CanvasText; }
  .credit-details > div, .credit-details, .credits-section + .credits-section, .credit-figure + .credit-figure, .credit-figure + p, .credits-header { border-color: CanvasText; }
}