/* Meet the Characters page — deliberately uses page-specific class names
   to avoid collisions with homepage .hero-art and related rules in site.css. */

.characters-page{padding-bottom:34px}

.characters-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#0b4f86 0%,#1774a2 52%,#d9eed0 100%);
  color:#fff;
}
.characters-hero-inner{
  min-height:430px;
  display:grid;
  grid-template-columns:minmax(330px,.8fr) minmax(560px,1.4fr);
  align-items:center;
  gap:42px;
  padding-top:34px;
  padding-bottom:34px;
}
.characters-hero-copy{position:relative;z-index:2;max-width:500px}
.characters-eyebrow{
  margin:0 0 9px;
  color:#ffcf68;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.13em
}
.characters-hero h1{
  margin:0 0 22px;
  font-size:clamp(3.2rem,5.8vw,5.8rem);
  line-height:.9;
  color:#fff
}
.characters-hero-copy>p:last-child{
  max-width:480px;
  margin:0;
  font-size:1.2rem;
  font-weight:700
}
.characters-hero-art{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0
}
.characters-hero-art img{
  display:block;
  width:100%;
  max-width:880px;
  height:auto;
  border-radius:28px;
  box-shadow:0 12px 34px rgba(0,0,0,.2)
}

.character-list{display:grid;gap:20px;padding-top:22px}
.character-card{
  --accent:#bf3b29;
  --wash:#fff0db;
  display:grid;
  grid-template-columns:300px minmax(330px,1fr) 420px;
  gap:34px;
  align-items:center;
  min-height:320px;
  padding:26px 32px;
  overflow:hidden;
  border-radius:30px;
  background:var(--wash);
  box-shadow:0 8px 24px rgba(7,54,107,.08)
}
.paco-card{--accent:#1452a0;--wash:#dff3ff}
.eldo-card{--accent:#27763d;--wash:#e8f4dd}
.squirrel-card{--accent:#ae4d0e;--wash:#fff0cf}

.character-main-image{
  height:275px;
  display:flex;
  align-items:center;
  justify-content:center
}
.character-main-image img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain
}
.character-copy h2{
  margin:0;
  color:var(--accent);
  font-size:clamp(3rem,4vw,4.2rem);
  line-height:.95
}
.character-tagline{
  margin:.45rem 0 .9rem;
  color:var(--accent);
  font-size:1.35rem;
  font-weight:900
}
.character-copy p:last-child{
  max-width:620px;
  margin-bottom:0;
  font-size:1.08rem
}

.character-snaps{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  min-width:0
}
.polaroid{
  width:185px;
  height:205px;
  margin:0;
  padding:10px 10px 24px;
  background:#fff;
  border-radius:3px;
  box-shadow:0 7px 18px rgba(7,54,107,.2)
}
.polaroid img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain
}
.polaroid:first-child{transform:rotate(-6deg)}
.polaroid:last-child{transform:rotate(6deg)}

@media(max-width:1150px){
  .characters-hero-inner{grid-template-columns:.85fr 1.15fr}
  .character-card{grid-template-columns:250px 1fr 340px}
  .polaroid{width:150px;height:170px}
}
@media(max-width:900px){
  .characters-hero-inner{grid-template-columns:1fr}
  .characters-hero-copy{padding-top:14px}
  .characters-hero-art{padding-bottom:12px}
  .character-card{grid-template-columns:240px 1fr}
  .character-snaps{grid-column:1/-1;justify-content:flex-end}
}
@media(max-width:650px){
  .characters-hero-inner{gap:22px}
  .character-card{grid-template-columns:1fr;padding:22px}
  .character-main-image{height:260px}
  .character-copy{text-align:center}
  .character-snaps{grid-column:auto;justify-content:center}
  .polaroid{width:min(42vw,165px);height:min(46vw,185px)}
}