.sp-index { overflow: clip; }

.sp-index__hero { max-width: 1850px; margin-inline: auto; border-radius: var(--pd-section-radius); }
.sp-index__hero .wrap { width: min(100% - 64px, 1320px); margin-inline: auto; }

.sp-index__prologue { padding-block: calc(var(--section-space-l) * 1.4815); }
.sp-index__folio { display: flex; justify-content: space-between; align-items: center; padding-bottom: calc(var(--space-s) * 1.1); border-bottom: 1px solid var(--pd-line); color: var(--pd-muted); }
.sp-index__folio > span:last-child { color: var(--pd-accent); font-size: calc(var(--text-m) * 0.9444); }
.sp-index__prologue-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .72fr); gap: calc(var(--section-space-l) * 1.2963); align-items: start; padding-top: calc(var(--space-l) * 0.9333); }
.sp-index__prologue h2 { font-size: var(--h1); line-height: var(--h1-line-height); letter-spacing: var(--h1-letter-spacing); }
.sp-index__prologue-copy { max-width: 550px; padding-top: calc(var(--space-xs) * 0.5926); }
.sp-index__prologue-copy p { color: var(--pd-muted); font-size: var(--text-m); line-height: var(--text-line-height); }
.sp-index__prologue-copy p + p { margin-top: calc(var(--space-s) * 0.9); }
.sp-index__prologue-copy .pd-text-link { margin-top: calc(var(--space-m) * 0.9333); }

.sp-index__latest { border-top: 1px solid var(--pd-line); }
.sp-index__latest h2 { margin-top: calc(var(--space-xs) * 0.7407); }
.sp-index__folders { margin-top: calc(var(--space-m) * 1.1333); }
.sp-index__sample-note { margin-top: calc(var(--space-s) * 1.1); }

.sp-index__characters { margin-block: calc(var(--section-space-l) * 1.2222); padding-block: calc(var(--section-space-l) * 1.0741); background: var(--base-ultra-dark); border-block: 1px solid var(--pd-line); }
.sp-index__characters-head { display: grid; grid-template-columns: 1.12fr .62fr; gap: calc(var(--section-space-l) * 1.3889); align-items: end; margin-bottom: var(--space-l); }
.sp-index__characters-head h2 { margin-top: calc(var(--space-xs) * 0.7407); line-height: var(--h1-line-height); }
.sp-index__characters-head > p { max-width: 38ch; color: var(--pd-muted); font-size: var(--text-s); line-height: var(--text-line-height); }
.sp-index__character-strip { display: grid; grid-template-columns: 1.15fr .92fr .74fr; gap: calc(var(--space-xs) * 1.037); min-height: 610px; }
.sp-index__character { position: relative; isolation: isolate; overflow: hidden; min-height: 510px; border-radius: calc(var(--radius) * 1.1429); background: var(--pd-deep); color: var(--white); }
.sp-index__character::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb,var(--base-ultra-dark) 20%,transparent) 20%, transparent 48%, color-mix(in srgb,var(--base-ultra-dark) 90.9804%,transparent) 100%); }
.sp-index__character img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.62) contrast(1.03); transition: transform .8s var(--pd-ease), filter .5s ease; }
.sp-index__character--vera img { object-position: 48% 18%; }
.sp-index__character--alma { margin-top: calc(var(--space-xl) * 1.1259); }
.sp-index__character--alma img { object-position: 48% 30%; }
.sp-index__character--next { margin-top: calc(var(--section-space-l) * 1.4074); }
.sp-index__character--next img { object-position: 54% 16%; filter: saturate(.05) brightness(.31) contrast(1.22); transform: scale(1.06); }
.sp-index__character-no { position: absolute; top: 20px; left: 22px; font: calc(var(--text-xs) * 0.75)/var(--text-line-height) var(--pd-mono); color: var(--primary-ultra-light); }
.sp-index__character-name { position: absolute; left: 22px; bottom: 58px; font: var(--heading-font-weight) clamp(var(--h3), calc(var(--h2) * 0.825), calc(var(--h2) * 0.9583))/var(--text-line-height) var(--pd-display); letter-spacing: var(--h2-letter-spacing); }
.sp-index__character-link { position: absolute; left: 22px; right: 22px; bottom: 21px; display: flex; justify-content: space-between; align-items: center; font: calc(var(--text-xs) * 0.75)/var(--text-line-height) var(--pd-mono); letter-spacing: calc(var(--h6-letter-spacing) * 0.6); text-transform: uppercase; color: var(--neutral-light); }
.sp-index__character-link svg { width: 15px; height: 15px; }
a.sp-index__character:hover img, a.sp-index__character:focus-visible img { transform: scale(1.035); filter: saturate(.86) contrast(1.03); }

.sp-index__invitation { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.1fr .9fr; gap: calc(var(--section-space-l) * 1.3889); align-items: center; min-height: 450px; margin-bottom: calc(var(--space-xl) * 1.0667); padding: calc(var(--section-space-l) * 0.7778); overflow: hidden; border: 1px solid var(--primary-semi-dark); border-radius: calc(var(--radius) * 1.5714); background: var(--primary-ultra-dark); }
.sp-index__invitation-light { position: absolute; inset: 0; z-index: -2; overflow: hidden; opacity: .66; }
.sp-index__invitation-light canvas { display: block; width: 100%; height: 100%; }
.sp-index__invitation-light::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb,var(--base-ultra-dark) 33.3333%,transparent), color-mix(in srgb,var(--base-ultra-dark) 80.3922%,transparent) 80%), radial-gradient(ellipse at 12% 72%, color-mix(in srgb,var(--primary-hover) 40%,transparent), transparent 56%); }
.sp-index__invitation h2 { margin-top: calc(var(--space-xs) * 0.963); max-width: 12ch; font-size: var(--h1); line-height: var(--h1-line-height); }
.sp-index__invitation-copy > p:not(.sp-kicker) { max-width: 44ch; margin-top: calc(var(--space-m) * 0.9); color: var(--primary-light); line-height: var(--text-line-height); }
.sp-index__invitation-action { padding-bottom: calc(var(--space-xs) * 0.2963); }
.sp-index__steps { display: flex; gap: calc(var(--space-xs) * 0.7407); flex-wrap: wrap; margin-bottom: calc(var(--space-m) * 0.9333); }
.sp-index__steps span { display: flex; gap: calc(var(--space-xs) * 0.7407); align-items: center; font: calc(var(--text-xs) * 0.75)/var(--text-line-height) var(--pd-mono); color: var(--primary-light); }
.sp-index__steps span:not(:last-child)::after { content: "/"; margin-left: calc(var(--space-xs) * 0.1481); color: var(--primary-semi-dark); }
.sp-index__steps b { color: var(--primary-semi-light); font-weight: var(--text-font-weight); }

.sp-index [data-sp-reveal] { transition: opacity .8s ease, transform .8s var(--pd-ease); }
.sp-index.is-reveal-ready [data-sp-reveal]:not(.is-visible) { opacity: 0; transform: translateY(22px); }

@media (max-width: 900px) {
  .sp-index__prologue-grid, .sp-index__characters-head, .sp-index__invitation { grid-template-columns: 1fr; }
  .sp-index__character-strip { grid-template-columns: 1fr 1fr; min-height: 0; }
  .sp-index__character { min-height: 500px; }
  .sp-index__character--alma { margin-top: calc(var(--space-l) * 1.1111); }
  .sp-index__character--next { grid-column: 1 / -1; margin: 0; min-height: 320px; }
  .sp-index__character--next img { object-position: 50% 28%; }
}

@media (max-width: 640px) {
  .sp-index__hero { border-radius: calc(var(--radius) * 1.2857); }
  .sp-index__hero .wrap { width: min(100% - 36px, 1320px); }
  .sp-index__hero .pd-threshold__foot > span { display: none; }
  .sp-index__hero .pd-threshold__foot { justify-content: center; }
  .sp-index__prologue { padding-block: calc(var(--space-xl) * 1.2148); }
  .sp-index__prologue-grid { gap: calc(var(--space-m) * 1.0667); }
  .sp-index__latest .sp-heading-row { align-items: start; flex-direction: column; }
  .sp-index__character-strip { grid-template-columns: 1fr; }
  .sp-index__character, .sp-index__character--alma, .sp-index__character--next { margin-top: 0; min-height: 520px; }
  .sp-index__character--next { min-height: 290px; }
  .sp-index__characters-head { gap: calc(var(--space-m) * 0.8); }
  .sp-index__invitation { margin-inline: calc(var(--space-s) * 0.9); padding: calc(var(--space-l) * 0.9333) calc(var(--space-m) * 0.8333); min-height: 530px; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-index [data-sp-reveal] { transition: none; }
  .sp-index.is-reveal-ready [data-sp-reveal]:not(.is-visible) { opacity: 1; transform: none; }
  .sp-index__character img { transition: none; }
}