.perspective-welcome { background: #0b0c0b; }
.perspective-welcome::before { content: ''; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, transparent 0 72%, rgba(242,238,229,.035) 72% 72.08%, transparent 72.08%), linear-gradient(128deg, transparent 0 37%, rgba(242,238,229,.07) 37.04% 37.1%, transparent 37.14%); }
.perspective-grid { position: absolute; z-index: -1; inset: var(--header-height) clamp(28px,5.3vw,102px) clamp(34px,5vh,70px); border: 1px solid rgba(242,238,229,.16); border-width: 1px 0; pointer-events: none; }
.perspective-grid::before { content: ''; position: absolute; top: 0; bottom: 0; left: 67%; width: 1px; background: rgba(242,238,229,.12); }
.perspective-welcome .welcome-copy { position: relative; z-index: 1; width: min(1080px, 78vw); }
.perspective-welcome .welcome-copy h1 { font-size: clamp(96px,12.5vw,232px); }
.perspective-welcome .welcome-copy > span { max-width: 760px; }
.perspective-register { position: absolute; z-index: -1; top: 16vh; right: clamp(34px,6vw,112px); width: clamp(300px,31vw,590px); height: min(57vh,620px); border-block: 1px solid rgba(242,238,229,.16); color: var(--cream); }
.perspective-register::before { content: ''; position: absolute; inset: 0 24% 0 auto; width: 1px; background: rgba(242,238,229,.11); }
.perspective-register span, .perspective-register small { position: absolute; font: 400 12px/1.2 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.perspective-register span { top: 16px; left: 0; opacity: .58; }
.perspective-register small { right: 0; bottom: 17px; opacity: .5; }
.perspective-register strong { position: absolute; right: 4%; bottom: -1.5%; margin: 0; font: 400 clamp(190px,25vw,470px)/.66 var(--serif); letter-spacing: -.09em; opacity: .045; }
.perspective-register i { position: absolute; top: 43%; right: 0; left: 0; height: 1px; background: rgba(242,238,229,.2); }
.perspective-ticker { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; overflow: hidden; padding: 13px 0 12px; border-top: 1px solid rgba(242,238,229,.2); background: rgba(11,12,11,.58); backdrop-filter: blur(10px); }
.perspective-ticker div { display: flex; width: max-content; animation: tickerMove 24s linear infinite; }
.perspective-ticker span, .perspective-ticker b { flex: none; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.perspective-ticker b { margin: 0 28px; color: var(--rust); font-weight: 400; }
@keyframes tickerMove { to { transform: translateX(-50%); } }
.paper-view::after, .dark-view::after { content: attr(data-mark); position: absolute; z-index: -1; top: calc(var(--header-height) + 1vh); right: 3vw; font: 400 clamp(150px,22vw,430px)/.75 var(--serif); letter-spacing: -.08em; opacity: .035; pointer-events: none; }
.dark-view::after { opacity: .045; }
.choice-grid--three { grid-template-columns: repeat(3,1fr); }
.choice-grid--three legend { grid-column: 1 / -1; }
.choice-card > span::after { content: '+'; position: absolute; top: 14px; right: 16px; display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid currentColor; border-radius: 50%; font: 400 17px/1 var(--mono); opacity: .4; transition: transform .28s, opacity .2s, color .2s, background .2s; }
.choice-card input:checked + span::after { content: '✓'; color: var(--cream); background: var(--rust); border-color: var(--rust); opacity: 1; transform: rotate(360deg); }
.chapter-card--dark .choice-card input:checked + span::after { color: var(--cream); }
.selection-count { grid-column: 1 / -1; justify-self: end; order: 20; margin-top: 11px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .45; transition: color .2s, opacity .2s; }
.selection-count.has-selection { color: var(--rust); opacity: 1; }
.compact-choices .selection-count, .word-choices .selection-count { flex-basis: 100%; text-align: right; }
.choice-card:has(input:checked) { animation: selectFlash .38s ease both; }
@keyframes selectFlash { 45% { filter: brightness(1.18); } }
.text-field--spaced { display: block; margin-top: 34px; }
.choice-other { margin-top: 22px; }
.choice-other.text-field--spaced { margin-top: 34px; }
.identity-block .field-grid { width: 100%; }
.review-submit { background: #f2eee5; }

@media (max-width: 980px) {
  .choice-grid--three { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 760px) {
  .brief-header .brand span { display: none; }
  .perspective-welcome { align-items: end; padding-bottom: 72px; }
  .perspective-welcome::before { background: linear-gradient(90deg, transparent 0 72%, rgba(242,238,229,.04) 72% 72.15%, transparent 72.15%), linear-gradient(145deg, transparent 0 58%, rgba(242,238,229,.07) 58.06% 58.18%, transparent 58.24%); }
  .perspective-grid { inset: 72px 18px 24px; }
  .perspective-grid::before { left: 72%; }
  .perspective-welcome .welcome-copy { width: 100%; }
  .perspective-welcome .welcome-copy h1 { font-size: clamp(78px,25vw,118px); }
  .perspective-welcome .welcome-copy > span { margin-top: 24px; font-size: 15px; line-height: 1.55; }
  .perspective-welcome .welcome-proof { display: grid; width: 100%; }
  .perspective-welcome .welcome-proof span { padding: 9px 0; border-bottom: 1px solid rgba(242,238,229,.15); }
  .perspective-welcome .welcome-note { display: none; }
  .perspective-register { top: 12vh; right: -72px; width: 260px; height: 46vh; opacity: .58; }
  .perspective-register strong { font-size: 210px; }
  .perspective-register span, .perspective-register small { display: none; }
  .perspective-ticker { padding-block: 10px; }
  .perspective-ticker div { animation-duration: 18s; }
  .choice-grid--three { grid-template-columns: 1fr; }
  .identity-block .field-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .perspective-ticker div, .choice-card:has(input:checked) { animation: none; }
}
