/* User in the spotlight rubric — self-contained, reuses site tokens from styles.css */

/* Overview card grid */
.sl-grid{
  list-style:none;margin:0;padding:0;display:grid;gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.sl-card{
  background:var(--cream-100,#fff);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow,0 6px 24px rgba(46,26,90,.08));transition:transform .18s ease;
}
.sl-card:has(a:hover){transform:translateY(-3px);}
.sl-card a{display:block;text-decoration:none;color:inherit;}
.sl-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--cream-200,#efe9f7);}
.sl-card-body{display:block;padding:14px 16px 18px;}
.sl-card-name{display:block;font-weight:700;color:var(--purple-900,#2E1A5A);font-size:1.15rem;}
.sl-card-origin{display:block;margin-top:2px;}
.sl-card-teaser{display:block;margin-top:8px;}

/* Detail article */
.sl-article{padding:8px 0 40px;}
.sl-country{margin-top:-4px;font-weight:600;}
.sl-notice{
  max-width:640px;margin:14px auto 0;padding:8px 14px;text-align:center;
  background:var(--cream-200,#efe9f7);border-radius:10px;
}
.sl-notice a{white-space:nowrap;}
.sl-hero{margin:26px auto 8px;max-width:560px;}
.sl-hero img{width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow,0 6px 24px rgba(46,26,90,.10));}
.sl-photo{margin:22px auto;max-width:480px;}
.sl-photo img{width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow,0 6px 24px rgba(46,26,90,.10));}
.sl-qa{max-width:660px;margin:26px auto 0;}
.sl-qa h2{
  font-family:"DM Serif Display",Georgia,serif;font-weight:400;
  color:var(--purple-900,#2E1A5A);font-size:1.35rem;line-height:1.25;margin:0 0 8px;
}
.sl-answer p{margin:0 0 12px;line-height:1.65;}
.sl-answer a{color:var(--purple-700,#5a3ea8);text-decoration:underline;text-underline-offset:2px;}
.sl-cta{max-width:660px;margin:44px auto 0;padding:28px 22px;background:var(--cream-200,#efe9f7);border-radius:18px;}
.sl-cta .lede{margin-top:6px;}
.sl-back{margin-top:30px;}
.sl-back a{color:var(--purple-700,#5a3ea8);text-decoration:none;font-weight:600;}
.sl-back a:hover{text-decoration:underline;}

@media (max-width:560px){
  .sl-hero,.sl-photo{max-width:100%;}
  .sl-qa h2{font-size:1.2rem;}
}