/* the card grid shared by the section pages: a title row, then worlds that play a moving picture under their name */
.sect { max-width: 1240px; margin: 0 auto; padding: 22px 24px 88px; box-sizing: border-box }
/* the title row, as Earth's: the name, then what's here beside it */
.sect > header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 22px }
.sect h1 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em }
.sect .sub { margin: 0; font-size: 15px; line-height: 1.4; color: var(--soft); text-wrap: pretty }
.worlds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; list-style: none; margin: 0; padding: 0 }
.world a { display: block; height: 100%; text-decoration: none; outline: none }
/* the words sit on the moving picture, over a shade so they read */
.world .lab { position: absolute; z-index: 1; inset: 0 0 auto; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 20px 22px 56px; background: linear-gradient(color-mix(in srgb, var(--bg) 78%, transparent), color-mix(in srgb, var(--bg) 40%, transparent) 60%, transparent); pointer-events: none }
.world .lab b { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soft) }
/* the line under a name: small, and kept to a third of the screen or so, so it reads as a caption over the picture */
.world .lab span { max-width: min(26em, 33vw); font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -.008em; text-wrap: pretty }
.world .screen { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--charcoal); isolation: isolate; transition: transform .25s ease, border-color .25s ease }
.world.wide { grid-column: 1 / -1 }
.world.wide .screen { aspect-ratio: 2 / 1 }
.world video, .world img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover }
:root[data-theme="light"] .world .screen { background: var(--chalk) }
:root[data-theme="light"] :is(.world video, .world img) { filter: url(#chalk) }
.world .go { position: absolute; z-index: 1; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px 8px 15px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--ink); font-size: 14px; font-weight: 600; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .2s, color .2s }
.world .go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.world a:hover .screen, .world a:focus-visible .screen { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ink) 34%, transparent) }
.world a:hover .go, .world a:focus-visible .go { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.world a:focus-visible .screen { outline: 2px solid var(--ink); outline-offset: 4px }
.sect .next { margin: 0 }
.sect .next a { display: inline-flex; align-items: center; gap: 4px; padding: 9px 12px 9px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; transition: background .15s }
.sect .next a:hover, .sect .next a:focus-visible { background: var(--wash2); outline: none }
.sect .next svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.earth { min-height: calc(100dvh - 63px); display: flex; flex-direction: column; justify-content: center; padding-top: 40px; padding-bottom: 120px }
.earth > header { margin-bottom: 32px }
@media (max-width: 860px) { .worlds { grid-template-columns: 1fr; gap: 40px } .world.wide .screen { aspect-ratio: 4 / 3 } .world .lab span { max-width: min(26em, 70vw) } }
@media (max-width: 640px) {
  .sect { padding: 16px 16px 56px } .sect > header { margin-bottom: 16px }
  .world .lab { padding: 16px 16px 44px } .world .lab span { font-size: 14px } .world .screen { border-radius: 16px }
  .earth { min-height: calc(100dvh - 57px); padding-bottom: 96px }
}
@media (prefers-reduced-motion: reduce) { .world .screen, .world .go, .sect .next a { transition: none } .world a:hover .screen, .world a:focus-visible .screen { transform: none } }