.media { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.frame { position: absolute; left: 50%; top: 50%; width: max(100cqw, 100cqh * var(--ar, 1.7778)); height: max(100cqh, 100cqw / var(--ar, 1.7778)); transform: translate(-50%, -50%); }
.frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.end { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: var(--space-4); }
.lede { max-width: 32em; font-size: clamp(18px, 1.4vw, 21px); color: var(--ink-soft); }

.page--prose { padding: 150px var(--gutter) var(--space-5); background: radial-gradient(120% 60% at 80% 0%, var(--wall-2), var(--wall) 50%, var(--night)); }
.prose { max-width: 720px; margin: 0 auto; display: grid; gap: 14px; }
.prose h1 { margin: 6px 0 18px; font-size: var(--h-l); color: var(--tube); text-shadow: var(--neon-text); }
.prose h2 { margin-top: 18px; font-size: var(--h-s); }
.prose p { color: var(--ink-soft); }

.page--lost { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.page--lost .frame { --ar: .8; }
.page__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(4, 9, 8, .96) 0%, rgba(4, 9, 8, .78) 40%, rgba(4, 9, 8, .25) 80%); }
.page__copy { position: relative; z-index: 2; display: grid; gap: var(--space-3); justify-items: start; padding-bottom: var(--space-5); }
.page__copy h1 { font-size: var(--h-xl); line-height: .84; }
.page__copy .tube-off { -webkit-text-stroke-width: 2px; }