.mcsp {
  --mcsp-navy: #071426;
  --mcsp-blue: #102b45;
  --mcsp-gold: #d3a73b;
  --mcsp-cream: #f5ead0;
  --mcsp-white: #fff;
  color: #17202a;
  font-family: Arial, Helvetica, sans-serif;
  margin: 24px auto;
  max-width: 1180px;
}

.mcsp *, .mcsp *::before, .mcsp *::after { box-sizing: border-box; }
.mcsp [hidden] { display: none !important; }

.mcsp__hero {
  background: linear-gradient(135deg, var(--mcsp-navy), var(--mcsp-blue));
  border: 3px solid var(--mcsp-gold);
  color: var(--mcsp-white);
  padding: clamp(28px, 6vw, 72px) 24px;
  text-align: center;
}

.mcsp__eyebrow,
.mcsp__bio-kicker,
.mcsp__guest-star {
  color: var(--mcsp-gold);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.mcsp__hero h2 {
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(34px, 6vw, 66px);
  line-height: 1;
  margin: 0 auto 18px;
  max-width: 900px;
}

.mcsp__hero > p:last-child { font-size: 18px; margin: 0 auto; max-width: 720px; }

.mcsp__builder,
.mcsp__result {
  background: #faf7f0;
  border: 1px solid #dacda9;
  padding: clamp(24px, 5vw, 54px);
}

.mcsp__steps { display: flex; gap: 10px; justify-content: center; margin-bottom: 34px; }
.mcsp__steps span { align-items: center; color: #394555; display: flex; font-size: 14px; gap: 7px; }
.mcsp__steps b { align-items: center; background: var(--mcsp-navy); border-radius: 50%; color: #fff; display: inline-flex; height: 28px; justify-content: center; width: 28px; }

.mcsp__field { margin: 0 auto 28px; max-width: 650px; }
.mcsp__field label,
.mcsp__characters legend { color: var(--mcsp-navy); display: block; font-family: Georgia, 'Times New Roman', serif; font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.mcsp__field input { background: #fff; border: 2px solid #bdad83; border-radius: 3px; color: #111; font-size: 18px; padding: 14px 16px; width: 100%; }
.mcsp__field input:focus { border-color: var(--mcsp-gold); outline: 3px solid rgba(211,167,59,.22); }

.mcsp__characters { border: 0; margin: 0 auto 30px; max-width: 980px; padding: 0; }
.mcsp__characters legend { text-align: center; width: 100%; }
.mcsp__character-options { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.mcsp__character-choice { cursor: pointer; position: relative; }
.mcsp__character-choice input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.mcsp__character-choice span { background: #fff; border: 2px solid #c9bea1; border-radius: 999px; display: block; font-size: 14px; font-weight: 700; padding: 9px 14px; transition: .15s ease; }
.mcsp__character-choice input:checked + span { background: var(--mcsp-navy); border-color: var(--mcsp-gold); color: #fff; }
.mcsp__character-choice input:focus-visible + span { outline: 3px solid rgba(211,167,59,.45); }

.mcsp__camera { margin: 0 auto; max-width: 650px; }
.mcsp__viewfinder { aspect-ratio: 1 / 1; background: #d7d7d7; border: 6px solid var(--mcsp-navy); margin: 0 auto 18px; max-width: 430px; overflow: hidden; position: relative; }
.mcsp__viewfinder video,
.mcsp__viewfinder img { display: none; height: 100%; object-fit: cover; width: 100%; }
.mcsp__viewfinder video { transform: scaleX(-1); }
.mcsp__camera-placeholder { align-items: center; color: #38414b; display: flex; flex-direction: column; height: 100%; justify-content: center; padding: 20px; text-align: center; }
.mcsp__camera-placeholder span { font-size: 54px; }
.mcsp__camera-placeholder p { margin: 8px 0 0; }
.mcsp__camera-actions,
.mcsp__result-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.mcsp__button,
.mcsp__reveal {
  appearance: none;
  background: var(--mcsp-navy);
  border: 2px solid var(--mcsp-navy);
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  padding: 13px 19px;
  text-align: center;
  text-decoration: none;
}
.mcsp__button:hover,
.mcsp__button:focus-visible,
.mcsp__reveal:hover,
.mcsp__reveal:focus-visible { filter: brightness(1.15); transform: translateY(-1px); }
.mcsp__button--gold { background: var(--mcsp-gold); border-color: var(--mcsp-gold); color: #15120b; }
.mcsp__button--outline { background: transparent; color: var(--mcsp-navy); }
.mcsp__reveal { display: block; font-family: Georgia, 'Times New Roman', serif; font-size: 21px; margin: 26px auto 0; padding: 16px 28px; }
.mcsp__error { background: #fff1f0; border-left: 5px solid #a91e16; color: #73120d; font-weight: 700; margin: 18px auto; max-width: 650px; padding: 12px 15px; }

.mcsp__result { background: linear-gradient(135deg, var(--mcsp-navy), var(--mcsp-blue)); border-color: var(--mcsp-gold); color: #fff; }
.mcsp__ticket-heading { text-align: center; }
.mcsp__ticket-heading > p { color: var(--mcsp-gold); font-size: 17px; letter-spacing: .15em; margin: 0; }
.mcsp__ticket-heading h3 { color: #fff; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(38px, 6vw, 64px); margin: 8px 0 30px; }
.mcsp__result-layout { align-items: stretch; display: grid; gap: 30px; grid-template-columns: minmax(250px, .8fr) minmax(300px, 1.2fr); margin: 0 auto 28px; max-width: 900px; }
.mcsp__featured-card { background: #fff; color: var(--mcsp-navy); padding: 16px; text-align: center; }
.mcsp__featured-card img { aspect-ratio: 1 / 1; height: auto; object-fit: cover; width: 100%; }
.mcsp__featured-card h4 { color: var(--mcsp-navy); font-family: Georgia, 'Times New Roman', serif; font-size: 25px; line-height: 1.1; margin: 6px 0 4px; }
.mcsp__guest-star { margin: 14px 0 0; }
.mcsp__bio-panel { align-self: center; border-bottom: 1px solid rgba(211,167,59,.5); border-top: 1px solid rgba(211,167,59,.5); font-family: Georgia, 'Times New Roman', serif; font-size: 20px; line-height: 1.6; padding: 28px 0; }
.mcsp__bio-panel > p { color: #fff; }
.mcsp__bio-panel .mcsp__bio-kicker,
.mcsp__bio-panel .mcsp__verdict { color: var(--mcsp-gold); }
.mcsp__verdict { font-style: italic; margin-bottom: 0; }
.mcsp__result .mcsp__button--outline { border-color: var(--mcsp-gold); color: #fff; }

.mcsp__cast-section { background: #fff; border: 1px solid #d7d7d7; padding: clamp(24px, 5vw, 54px); }
.mcsp__cast-section > h3 { color: var(--mcsp-navy); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(34px, 5vw, 54px); font-weight: 400; margin: 0 0 30px; text-align: center; text-transform: uppercase; }
.mcsp__cast-grid { display: grid; gap: 28px 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mcsp__cast-card { border: 3px solid transparent; padding: 0 0 10px; text-align: center; transition: .2s ease; }
.mcsp__cast-card img { aspect-ratio: .68 / 1; display: block; height: auto; object-fit: cover; width: 100%; }
.mcsp__cast-card h4 { color: #111; font-size: 15px; line-height: 1.15; margin: 10px 4px 2px; text-transform: uppercase; }
.mcsp__cast-card p { color: #222; font-size: 13px; line-height: 1.2; margin: 0 4px; text-transform: uppercase; }
.mcsp__cast-card--guest { background: #fff9e8; border-color: var(--mcsp-gold); box-shadow: 0 8px 26px rgba(7,20,38,.18); transform: translateY(-5px); }
.mcsp__cast-card--guest img { aspect-ratio: 1 / 1; }

.mcsp__bios-section {
  background: #f4efe3;
  border: 1px solid #d4c59e;
  padding: clamp(24px, 5vw, 54px);
}

.mcsp__bios-section > h3 {
  color: var(--mcsp-navy);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 400;
  margin: 0 0 30px;
  text-align: center;
  text-transform: uppercase;
}

.mcsp__bio-list {
  display: grid;
  gap: 22px;
  margin: 0 auto;
  max-width: 980px;
}

.mcsp__bio-entry {
  align-items: start;
  background: #fff;
  border-left: 6px solid var(--mcsp-gold);
  box-shadow: 0 7px 22px rgba(7, 20, 38, .09);
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 250px;
  overflow: hidden;
  width: 100%;
}

.mcsp__bio-photo {
  background: #d7d7d7;
  aspect-ratio: 2 / 3;
  height: auto;
  min-height: 0;
  overflow: hidden;
  width: 190px;
}

.mcsp__bio-photo img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  width: 100%;
}

.mcsp__bio-copy {
  align-self: center;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 25px 30px;
}

.mcsp__bio-copy h4 {
  color: var(--mcsp-navy);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 30px;
  line-height: 1.05;
  margin: 0 0 5px;
}

.mcsp__bio-copy p {
  color: #263442;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.6;
  margin: 12px 0 0;
}

.mcsp__bio-copy .mcsp__bio-role {
  color: #8a681b;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  margin: 0;
  text-transform: uppercase;
}

.mcsp__bio-entry--guest {
  background: #fff9e8;
  border-color: var(--mcsp-gold);
  box-shadow: 0 10px 30px rgba(7, 20, 38, .18);
}

.mcsp__bio-entry--guest .mcsp__bio-role::after {
  content: ' • Interactive Playbill Guest';
}

@media (max-width: 760px) {
  .mcsp { margin-left: 0; margin-right: 0; max-width: 100%; width: 100%; }
  .mcsp__result-layout { grid-template-columns: 1fr; }
  .mcsp__featured-card { margin: 0 auto; max-width: 380px; width: 100%; }
  .mcsp__cast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcsp__steps { align-items: center; flex-direction: column; }
  .mcsp__bio-entry { grid-template-columns: 100px minmax(0, 1fr); min-height: 0; }
  .mcsp__bio-photo { width: 100px; }
  .mcsp__bio-copy { padding: 18px 16px; }
  .mcsp__bio-copy h4 { font-size: 23px; }
  .mcsp__bio-copy p { font-size: 14px; line-height: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
  .mcsp * { scroll-behavior: auto !important; transition: none !important; }
}