/* craft.css — the Craft Media work page (various-clients.html): five collage sections under the
   poster header. Tokens only. Each collage keeps the proportions of the Figma frame: every image in
   a row gets a flex share equal to its width in the design (--w), so a row scales as one piece and
   images that share a baseline in the design still share one here. */
.craft-main{background:var(--ground);}
/* the Craft page follows its header's orange the way the CAS pages follow their green: accents use
   orange 800 and running text orange 900 (about 9:1 and 13:1 on the cream ground) */
.sfp--craft{--accent:var(--orange-800);--muted:var(--orange-800);--ink:var(--orange-900);}
.craft-section{
  max-width:96rem;margin-inline:auto;
  padding:clamp(2.5rem,6vw,5rem) var(--step) 0;
}
.craft-section:last-child{padding-bottom:clamp(4rem,9vw,8rem);}
/* a rule between each section, on the content edges */
.craft-section + .craft-section::before{
  content:"";display:block;
  border-top:1px solid var(--rule);
  margin-bottom:clamp(1.5rem,3vw,2.5rem);
}
.craft-section > h2{
  font-family:var(--display-alt);font-weight:400;
  font-size:clamp(1.9rem,3.2vw,3rem);line-height:.98;letter-spacing:-.005em;text-transform:uppercase;
  color:var(--accent);
}
.craft-collage{
  display:flex;gap:clamp(.75rem,2.4vw,2rem);
  margin-top:clamp(1.25rem,2.4vw,2rem);
  align-items:flex-end;
}
.craft-collage + .craft-collage{margin-top:clamp(.75rem,2.4vw,2rem);}
.craft-collage--top{align-items:flex-start;}
.craft-collage--center{align-items:center;}
.craft-collage > *{flex:var(--w,1) 1 0;min-width:0;}
.craft-collage figure{margin:0;}
.craft-collage img{
  display:block;width:100%;height:auto;
  border-radius:.5rem;
  box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 18%,transparent);
}
/* a column of images inside a row (the event and social collages) */
.craft-stack{display:flex;flex-direction:column;gap:clamp(.75rem,2.4vw,2rem);}

@media (max-width:47.99rem){
  .craft-collage{flex-direction:column;align-items:stretch;}
  .craft-collage > *{flex:none;}
  /* narrow, tall pieces read better at a sensible width than stretched across a phone */
  .craft-collage--tall figure{max-width:26rem;margin-inline:auto;width:100%;}
}