/* Home layout; complete illustration is contained in its own grid cell. */
body:has(.opening-home) {
  background: radial-gradient(ellipse at 65% 30%, #142e4055, transparent 64%), #0b1520;
}
body:has(.opening-home) .site-header {
  max-width: 1216px;
  padding: 24px 32px 17px;
  border-bottom: 0;
}
.home-view.opening-home { max-width: 1216px; margin: 0 auto; padding: 0 32px; }
.opening-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 47% 53%;
  grid-template-rows: auto auto;
  align-content: center;
  row-gap: 30px;
  min-height: 638px;
  padding: 20px 0 60px 14px;
}
.opening-art { position: absolute; z-index: -1; inset: -20px -32px -5px; overflow: hidden; }
.opening-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 83%, transparent 100%);
}
.opening-art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #0b1520 0%, #0b1520cf 15%, #0b152020 43%, transparent 56%);
  pointer-events: none;
}
.opening-heading { grid-column: 1; grid-row: 1; align-self: end; position: relative; z-index: 1; }
.opening-eyebrow { color: #e5a0b0; font-size: 15px; font-weight: 700; line-height: 1.6; margin-bottom: 20px; }
.opening-heading h1 { font-size: clamp(72px, 7.6vw, 94px); font-weight: 900; line-height: 1.16; letter-spacing: -5px; color: #edf4f8; white-space: nowrap; }
.opening-heading h1 > span { display: block; font-size: .57em; line-height: 1.6; letter-spacing: -2px; font-weight: 700; }
.opening-heading h1 strong { color: #a8e8e0; font-weight: 900; }
.opening-description { font-size: 19px; line-height: 1.85; color: #c5d6e1; margin-top: 22px; letter-spacing: -.3px; }
.opening-start { grid-column: 1; grid-row: 2; align-self: start; position: relative; z-index: 1; max-width: 376px; }
.opening-facts { display: flex; align-items: center; gap: 15px; color: #bdd0db; font-size: 15px; font-weight: 500; line-height: 1.5; margin: 0 0 17px; }
.opening-facts > span + span { border-left: 1px solid #5c7483; padding-left: 15px; }
.primary.opening-start-button { background: #a8e8e0; color: #142e36; border: 1px solid #bcefe8; border-radius: 8px; box-shadow: 0 5px 0 #1b4c54; min-height: 63px; padding: 17px 23px; font-size: 19px; font-weight: 800; }
.primary.opening-start-button:hover { background: #bcedE7; transform: translateY(-2px); box-shadow: 0 7px 0 #1b4c54; }
.primary.opening-start-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #1b4c54; }
.opening-resume { display: block; margin: 15px auto 0; color: #c4d7e2; font-size: 16px; min-height: 42px; }
.opening-home .opening-roster { position: relative; padding: 21px 0 16px; overflow: clip; }
.opening-roster::before { content: ''; position: absolute; left: 9%; right: 9%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #3c6074, transparent); }
.opening-home .opening-roster h2 { font-size: 22px; margin: 0 0 24px; color: #deebf3; }
.opening-home .mini-portraits { max-width: 700px; }
.opening-home .mini-portraits::before { background: #173246; }
body:has(.opening-home) .site-footer { max-width: 1152px; margin: 24px auto 0; padding: 21px 0 27px; }
@media (min-width: 1440px) {
  .opening-hero { min-height: 680px; padding-bottom: 70px; }
}
@media (min-width: 801px) and (max-width: 1050px) {
  .opening-hero { min-height: 570px; grid-template-columns: 45% 55%; padding-left: 0; }
  .opening-heading h1 { font-size: 76px; }
  .opening-art { inset: 0 -32px; }
  .opening-facts { gap: 11px; font-size: 14px; }
  .opening-facts > span + span { padding-left: 11px; }
  .opening-start { max-width: 340px; }
}
@media (max-width: 800px) {
  body:has(.opening-home) .site-header { padding: 19px 22px 13px; }
  body:has(.opening-home) .brand-wordmark { font-size: 24px; }
  .home-view.opening-home { padding: 0 22px; }
  .opening-hero { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; align-content: start; gap: 0; min-height: 0; padding: 10px 0 37px; }
  .opening-heading { grid-column: 1; grid-row: 1; text-align: center; }
  .opening-eyebrow { font-size: 14px; margin-bottom: 8px; }
  .opening-heading h1 { font-size: 70px; letter-spacing: -3.5px; line-height: 1.08; }
  .opening-heading h1 > span { font-size: 34px; letter-spacing: -1.5px; line-height: 1.5; }
  .opening-description { font-size: 17px; line-height: 1.65; margin-top: 15px; }
  .opening-art { position: relative; grid-column: 1; grid-row: 2; inset: auto; z-index: 0; width: calc(100% + 44px); max-width: 520px; height: 305px; justify-self: center; margin: 3px 0 -6px; }
  .opening-art img { object-position: right center; mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 82%, transparent 100%); }
  .opening-art::after { background: linear-gradient(90deg,#0b152080, transparent 12%, transparent 90%, #0b152050); }
  .opening-start { grid-column: 1; grid-row: 3; width: 100%; max-width: 390px; justify-self: center; }
  .opening-facts { justify-content: center; gap: 13px; margin-bottom: 14px; font-size: 14px; }
  .opening-facts > span + span { padding-left: 13px; }
  .primary.opening-start-button { font-size: 18px; min-height: 59px; padding: 15px 20px; }
  .opening-home .opening-roster { padding: 29px 0 10px; }
  .opening-home .opening-roster h2 { font-size: 21px; margin-bottom: 22px; }
  .opening-home .mini-portraits { max-width: 390px; }
  body:has(.opening-home) .site-footer { margin: 20px 22px 0; }
}
@media (min-width: 601px) and (max-width: 800px) {
  .opening-art { height: 375px; max-width: 490px; }
}
@media (min-width: 681px) and (max-width: 800px) {
  .opening-home .mini-portraits { max-width: 660px; }
}
@media (max-width: 360px) {
  .home-view.opening-home { padding-left: 18px; padding-right: 18px; }
  .opening-heading h1 { font-size: 62px; }
  .opening-heading h1 > span { font-size: 31px; }
  .opening-description { font-size: 16px; }
  .opening-art { width: calc(100% + 36px); height: 270px; }
  .opening-facts { gap: 10px; font-size: 13px; }
  .opening-facts > span + span { padding-left: 10px; }
}

/* Recompose the opening around the user's selected illustration. */
body:has(.opening-home) { background: #0b1520; min-width: 0; }
.opening-hero {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  column-gap: 36px; row-gap: 31px; min-height: 580px; padding: 34px 0 57px;
}
.opening-art {
  position: static; z-index: auto; inset: auto;
  grid-column: 2; grid-row: 1 / 3; align-self: center;
  width: 100%; height: auto; max-width: none; margin: 0;
  overflow: hidden; border-radius: 6px; border: 1px solid #355369;
  background: #122a3b; box-shadow: 8px 8px 0 #162c3b;
}
.opening-art img { display: block; width: 100%; height: auto; object-fit: contain; mask-image: none; }
.opening-art::after { display: none; }
.opening-art-cropped {
  --torn-edge: polygon(2.6% 5.1%, 19% 3.8%, 20.3% 4.5%, 39% 1.6%, 40.5% 2.2%, 62% 0%, 63.7% 1%, 91.8% .4%, 98% 3.2%, 97.1% 18.5%, 99% 20.2%, 97.7% 38%, 100% 39.4%, 98.5% 60.7%, 99.2% 62.3%, 96.8% 84%, 98% 86%, 95.5% 96.6%, 77% 95.9%, 75.7% 97.8%, 53% 96.6%, 51.4% 98.4%, 30% 97.4%, 28.7% 99.3%, 3.7% 100%, 2% 85.4%, 3.3% 83.6%, .3% 66.4%, 1.8% 64.6%, 0% 43%, 1.8% 40.9%, .8% 20.3%, 3.1% 18.6%);
  aspect-ratio: 7 / 6;
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: rotate(-1.5deg);
}
.opening-art-cropped::before,
.opening-art-cropped::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  clip-path: var(--torn-edge);
  pointer-events: none;
}
.opening-art-cropped::before {
  z-index: 0;
  background: linear-gradient(135deg, #a3c7d1 0%, #5e899d 58%, #b6cdd2 100%);
}
.opening-art-cropped::after {
  z-index: -1;
  background: #1c3d50;
  transform: translate(7px, 9px) rotate(.8deg);
}
.opening-art-cropped img {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
  clip-path: var(--torn-edge);
  transform: scale(.985);
}
.opening-heading h1 { font-size: clamp(64px, 6.7vw, 85px); letter-spacing: -4px; }
.opening-heading h1 > span { font-size: .59em; }
.opening-description { margin-top: 23px; }
.opening-facts { white-space: nowrap; }
body:has(.opening-home) .site-footer { padding-left: 22px; padding-right: 22px; }
@media (min-width: 801px) and (max-width: 1050px) {
  .opening-hero { column-gap: 27px; min-height: 520px; padding-top: 28px; }
  .opening-heading h1 { font-size: 64px; }
  .opening-eyebrow { font-size: 14px; }
  .opening-description { font-size: 18px; }
  .opening-facts { gap: 10px; }
  .opening-facts > span + span { padding-left: 10px; }
}
@media (max-width: 800px) {
  .opening-hero { grid-template-columns: 1fr; gap: 0; min-height: 0; padding: 10px 0 37px; }
  .opening-art { grid-column: 1; grid-row: 2; width: 100%; max-width: 490px; height: auto; margin: 22px 0 26px; box-shadow: none; }
  .opening-heading h1 { font-size: 70px; letter-spacing: -3.5px; }
  .opening-heading h1 > span { font-size: 34px; }
  .opening-description { margin-top: 13px; }
  body:has(.opening-home) .site-footer { padding-left: 0; padding-right: 0; }
}
@media (max-width: 360px) {
  .opening-heading h1 { font-size: 62px; }
  .opening-heading h1 > span { font-size: 31px; }
}