/* Social landing art direction, based on Paola's forest and gold cover. */
body[data-page="roles"] { background:var(--deep-green); }
body[data-page="roles"]::after {
  background:linear-gradient(100deg,rgba(9,25,17,.88),rgba(9,25,17,.48) 70%,rgba(9,25,17,.30));
}
.social-cover {
  position:absolute; inset:76px 0 auto; z-index:-1; width:100%; height:1080px;
  object-fit:cover; object-position:70% top; opacity:.52; pointer-events:none;
  mask-image:linear-gradient(#000 70%,transparent);
}
body[data-page="roles"] .brand span { color:var(--soft); font-weight:600; }
body[data-page="roles"] .site-header { background:rgba(9,25,17,.90); }
body[data-page="roles"] .participation-intro { padding-top:28px; }
body[data-page="roles"] .participation-intro h1 {
  max-width:24ch; margin:auto; color:var(--soft); font-weight:600;
  font-size:clamp(38px,4.7vw,66px); text-shadow:0 2px 18px rgba(0,0,0,.55);
}
body[data-page="roles"] .participation-intro p { color:var(--ivory); }
body[data-page="roles"] .role-detail {
  background:rgba(9,25,17,.80); border-color:rgba(240,193,90,.58);
  box-shadow:0 12px 36px rgba(0,0,0,.18); border-radius:18px;
}
body[data-page="roles"] .button { border-radius:28px; }
body[data-page="roles"] .button:not(.secondary) {
  background:linear-gradient(120deg,var(--soft),#edb847,var(--soft));
  color:var(--espresso); border-color:var(--soft);
}
body[data-page="roles"] .button:hover { filter:brightness(1.08); }
body[data-page="roles"] .wedge .shape { fill:rgba(9,35,23,.93); }
body[data-page="roles"] .wedge:hover .shape { fill:var(--bronze); }
body[data-page="roles"] .wedge[aria-pressed=true] .shape { fill:url(#selected-gold); }
body[data-page="roles"] .dial { filter:drop-shadow(0 5px 24px rgba(185,120,30,.25)); }
.cover-story { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:36px; }
.cover-story img { border-radius:18px; border:1px solid var(--line); width:100%; }
.cover-story h2 { color:var(--soft); margin-bottom:20px; }
.cover-story .small-note { font-size:11px; }
@media(max-width:760px) {
  .social-cover { inset-block-start:64px; height:1000px; object-position:65% top; opacity:.36; }
  body[data-page="roles"] .participation-intro { padding:22px 0 8px; }
  body[data-page="roles"] .participation-intro h1 { font-size:36px; max-width:20ch; }
  body[data-page="roles"] .participation-intro p { margin-top:10px; font-size:12px; }
  body[data-page="roles"] .dial { max-width:300px; }
  .cover-story { grid-template-columns:1fr; gap:22px; }
}