/* ============================================================
   A campaign's page, /campaign/<slug> — its hero, a short story,
   and its pieces in the collection's own cards (collection.css,
   through .shopx). Colours come only from the tokens in
   silver.css, so the site's look restyles all of it.
   ============================================================ */

/* Each section sets its own padding, over silver.css's generous default for
   every <section>; the pieces keep the collection's (.shopx). */

/* ---- the hero ------------------------------------------------------------ */
.cp-hero{ padding-block:clamp(28px,5vw,64px) clamp(24px,4vw,44px) }
.cp-hero-in{ display:grid; gap:clamp(24px,4vw,56px); align-items:center }
@media (min-width:880px){
  .cp-hero-in{ grid-template-columns:1fr 1fr }
  .cp-hero-img img{ max-height:76vh }     /* the hero stays within one screen */
}
.cp-hero-plain .cp-hero-in{ grid-template-columns:1fr }
.cp-hero-copy{ display:grid; gap:1rem; justify-items:start; max-width:40rem }

.cp-season{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brass) }
.cp-season.cp-draft{ color:var(--ink); background:var(--brass); padding:.35rem .7rem; letter-spacing:.12em }
.cp-hero h1{ font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.05 }
.cp-sub{ font-size:clamp(1rem,1.4vw,1.15rem); color:var(--silver-dim); max-width:40ch }
.cp-hero .btn{ margin-top:.5rem }

.cp-hero-img img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  background:var(--ink-soft); border:1px solid var(--line-soft);
}
/* On a phone the photograph comes first, a little shorter. */
@media (max-width:879px){
  .cp-hero-img{ order:-1 }
  .cp-hero-img img{ aspect-ratio:4/3 }
}

/* ---- the story ----------------------------------------------------------- */
.cp-story{
  display:grid; gap:1rem;
  padding-block:clamp(8px,2vw,20px) clamp(24px,4vw,44px);
  font-size:1.02rem; color:var(--silver-dim);
}
.cp-story > *{ max-width:46rem }   /* a reading measure, in line with the hero */
.cp-story blockquote{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,2vw,1.5rem);
  color:var(--silver); border-left:2px solid var(--brass); padding-left:1.1rem; margin-top:.5rem;
}

/* ---- the pieces ---------------------------------------------------------- */
.cp-none{ color:var(--mute); padding-block:1rem }
.cp-more{ margin-top:2rem; font-size:.9rem }
.cp-more a{ color:var(--brass); border-bottom:1px solid var(--line) }
.cp-more a:hover{ color:var(--brass-bright) }