/*
  HERO — colors the section, background, and text, but leaves layout/behavior to hero.css/hero.js.
  Scoped under .hc-hero so it won't leak into the host page.
*/
.hc-hero{
  position:relative;height:100vh;min-height:600px;overflow:hidden;
  background:var(--ink);color:var(--cream);
}
.hc-hero-title{
  position:relative;z-index:3;text-align:center;
}
.hc-hero .hc-org{
  font-family:var(--serif);font-weight:800;line-height:.9;
  font-size:clamp(3rem, 2rem + 6vw, 8rem);letter-spacing:-.02em;text-transform:uppercase;
}
.hc-hero .hc-issue{
  font-family:var(--sans);margin-top:1.2rem;
  font-size:clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem);
  letter-spacing:.45em;text-transform:uppercase;font-weight:500;color:var(--accent);
}
.hc-hero-mosaic{z-index:2;position:absolute;inset:0;pointer-events:none}
.hc-photo{
  position:absolute;background:#fff;padding:12px 12px 46px;
  border:1px solid rgba(10,10,10,.08);box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.hc-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hc-photo .hc-cap{
  position:absolute;left:12px;bottom:11px;right:12px;text-align:center;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#6b6b6b;
}
.hc-p1{width:clamp(170px,20vw,330px);height:clamp(230px,28vw,450px);top:11%;left:6%;transform:rotate(-7deg)}
.hc-p2{width:clamp(150px,16vw,260px);height:clamp(200px,22vw,365px);top:28%;right:8%;transform:rotate(6deg)}
.hc-p3{width:clamp(165px,18vw,300px);height:clamp(215px,25vw,400px);bottom:14%;left:14%;transform:rotate(4deg)}
.hc-p4{width:clamp(160px,17vw,280px);height:clamp(205px,24vw,380px);bottom:18%;right:16%;transform:rotate(-5deg)}
.hc-p5{width:clamp(120px,13vw,210px);height:clamp(160px,18vw,290px);top:17%;left:43%;transform:rotate(3deg);opacity:.92}
.hc-scroll-hint{
  position:absolute;z-index:3;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;color:var(--cream);
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;opacity:.8;
}
.hc-scroll-hint .hc-line{width:1px;height:56px;background:linear-gradient(var(--cream),transparent)}
@media(max-width:680px){
  .hc-p1{top:14%;left:4%}.hc-p2{right:4%}.hc-p3{left:5%;bottom:12%}.hc-p4{right:4%;bottom:20%}.hc-p5{display:none}
}