/* The Photo credits page's own passages, in page order. Served on /photo-credits only, after styles.css.
   Words on white: the page's name and a line of thanks, then one group of photographs for each page of the site that shows
   other people's work, in the order of the site: a small thumbnail, what it shows, who took it and where it came from. */

/* ---------- the opening (data-section="opening") ---------- */
.pc-open{padding-block:clamp(36px, 6vw, 96px) clamp(28px, 4vw, 60px)}
.pc-open h1{font-size:clamp(36px, 9.6vw, 46px);line-height:1.05;letter-spacing:-.018em}
.pc-open-words{margin-top:14px}
.pc-open .small-line{margin-top:14px;max-width:34em}
@media (min-width:900px){
  .pc-open-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .pc-open h1{grid-column:1 / 8;font-size:clamp(54px, 22px + 3.3vw, 88px);line-height:1.02}
  .pc-open-words{grid-column:8 / 13;margin:0 0 .4em}
}

/* ---------- one group for each page (data-section="credits-<page>") ---------- */
.pc-sec{padding-block:clamp(26px, 3.4vw, 60px);border-top:1px solid var(--line)}
.pc-sec:last-of-type{padding-bottom:clamp(56px, 7vw, 120px)}
.pc-grid{display:grid;gap:16px}
.pc-sec h2{font-size:clamp(27px, 6.6vw, 33px);line-height:1.1}
.pc-list{border-top:1px solid var(--line)}
.pc-item{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
.pc-item .photo{aspect-ratio:4/3;background:var(--birch)}
.pc-cap{margin:0;font-weight:600;line-height:1.3}
.pc-by{margin:4px 0 0;font-size:15px;line-height:1.55;color:var(--moss)}
.pc-by a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media (min-width:900px){
  .pc-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
  .pc-sec h2{grid-column:1 / 5;font-size:clamp(32px, 18px + 1.3vw, 44px)}
  .pc-list{grid-column:5 / 13}
  .pc-item{grid-template-columns:136px 1fr;gap:24px;padding:16px 0}
  .pc-by{font-size:16px}
}