/* A film opening, a photographic editorial, an illustrated way forward. */
.afterspin-vision { background: var(--paper); }
.vision-page { --vision-space: clamp(5rem, 10vw, 10rem); }
.vision-opening { position: relative; background: var(--night); color: var(--light); }
.vision-stage { position: relative; height: 100vh; height: 100svh; min-height: 42rem; isolation: isolate; overflow: hidden; }
.vision-film-frame { position: absolute; inset: 0; clip-path: inset(var(--vision-inset-y, 16%) var(--vision-inset-x, 8%)); background: #252525; }
.vision-film-still, .vision-film { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.vision-film { opacity: 0; }
.vision-film.is-playing { opacity: 1; }
.vision-film-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / .15) 35%, rgb(0 0 0 / .7)); }
.vision-opening-copy { position: absolute; inset-inline: var(--gutter); bottom: 16%; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 3rem; }
.vision-opening-copy h1 { font-size: clamp(5rem, 9vw, 6rem); line-height: 1.1; margin: 0; }
.vision-opening-copy > p { justify-self: end; max-width: 34ch; margin: 0 0 .5rem; font-size: 1rem; line-height: 1.8; }
.vision-opening-bottom { position: absolute; inset-inline: var(--gutter); bottom: 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; font-size: .8rem; }
.vision-opening-bottom > a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.vision-opening-bottom > a:hover { text-decoration: underline; text-underline-offset: .4em; }
.vision-motion { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 44px; padding: .5rem .75rem; border: 1px solid #666; background: var(--night); color: var(--light); font-size: .75rem; cursor: pointer; position: fixed; z-index: 35; right: var(--gutter); bottom: 1.5rem; }
.vision-motion:hover { border-color: currentColor; }
.vision-motion svg { flex: none; }
.vision-motion .vision-play-mark { display: none; }
.vision-motion[aria-pressed="true"] .vision-play-mark { display: block; }
.vision-motion[aria-pressed="true"] .vision-pause-mark { display: none; }
.vision-live .vision-opening { height: 180vh; height: 180svh; }
.vision-live .vision-stage { position: sticky; top: 0; }
.vision-intro, .vision-together { padding-block: var(--vision-space); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.vision-intro h2, .vision-together h2 { font-size: clamp(3rem, 5.4vw, 5rem); line-height: 1.08; max-width: 12ch; }
.vision-copy { font-size: 1rem; line-height: 1.9; max-width: 68ch; }
.vision-copy p:last-child { margin-bottom: 0; }
.vision-copy a, .vision-path-copy a { text-underline-offset: .3em; }
.vision-page > .vision-horizon { max-width: none; margin: 0; width: 100%; overflow: hidden; }
.vision-horizon img { width: 100%; height: auto; aspect-ratio: 7008 / 2102; object-fit: cover; }
.vision-style { padding-top: var(--vision-space); padding-bottom: clamp(3rem, 6vw, 6rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2vw; align-items: start; }
.vision-style-type { grid-column: 6 / 13; grid-row: 1; padding-top: 2rem; padding-left: 1rem; position: relative; z-index: 2; }
.vision-style-type h2 { max-width: 12ch; font-size: clamp(3.5rem, 6.3vw, 6rem); line-height: 1.04; }
.vision-style-type p { font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 700; font-style: italic; margin-top: 1.25rem; line-height: 1.3; }
.vision-sunset { grid-column: 1 / 6; grid-row: 1 / 3; padding-top: 1rem; }
.vision-night { grid-column: 8 / 12; grid-row: 2; margin-top: clamp(4rem, 9vw, 9rem); }
.vision-style figure, .vision-path figure, .vision-guide figure { margin: 0; }
.vision-style figure img { width: 100%; height: auto; }
.vision-together { padding-top: clamp(5rem, 9vw, 9rem); }
.vision-atlas { background: var(--night); color: var(--light); overflow: clip; padding-top: var(--vision-space); padding-bottom: 4rem; }
.vision-atlas-intro { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 10vw; }
.vision-atlas-copy h2 { font-size: clamp(3.5rem, 5.5vw, 5.5rem); max-width: 14ch; margin-bottom: 2rem; }
.vision-atlas-copy .vision-copy { max-width: 48ch; color: var(--night-soft); }
.vision-guide { justify-self: center; width: min(14rem, 100%); }
.vision-guide img { width: 100%; height: auto; max-height: 27rem; object-fit: contain; }
.vision-paths { padding-top: clamp(5rem, 10vw, 10rem); display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 12vw; }
.vision-path { position: relative; min-width: 0; padding-bottom: 3rem; }
.vision-path:nth-child(even) { padding-top: 9rem; }
.vision-path-link { display: block; text-decoration: none; }
.vision-path-link:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.vision-path-art { height: clamp(15rem, 23vw, 22rem); display: grid; align-items: end; justify-items: start; margin-bottom: 2rem; }
.vision-path-art figure { height: 100%; width: 100%; }
.vision-path-art img { width: 100%; height: 100%; object-fit: contain; object-position: left bottom; max-width: 24rem; }
.vision-path-1 .vision-path-art img { max-width: 12rem; }
.vision-path-2 .vision-path-art img { max-width: 26rem; }
.vision-path-3 .vision-path-art img { max-width: 19rem; }
.vision-path-copy { padding-right: 2rem; }
.vision-path-copy h3 { font-size: clamp(2.5rem, 3.6vw, 3.5rem); line-height: 1.1; margin-bottom: 1.1rem; }
.vision-path-copy p { max-width: 38ch; font-size: 1rem; line-height: 1.9; margin-bottom: 0; }
.vision-path-arrow { position: absolute; right: 0; bottom: 3.25rem; pointer-events: none; }
.vision-path-arrow svg { width: 26px; height: 26px; }
.vision-path-art, .vision-path-arrow { transition: transform .7s cubic-bezier(.2, .65, .3, 1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .vision-page:not(.vision-paused) .vision-path:has(a:hover, a:focus-visible) .vision-path-art { transform: translateY(-8px); }
    .vision-page:not(.vision-paused) .vision-path:has(a:hover, a:focus-visible) .vision-path-arrow { transform: translate(3px, -3px); }
}
.vision-signature { max-width: 50ch; margin: clamp(4rem, 8vw, 8rem) auto 0; padding-inline: var(--gutter); font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.75rem); line-height: 1.8; text-align: center; text-wrap: balance; }
.vision-fallback { padding-block: var(--vision-space); }
.vision-live [data-vision-depth] { transform: translate3d(0, var(--vision-drift, 0px), 0); }
@media (max-width: 780px) {
    .vision-stage { min-height: 42rem; }
    .vision-live .vision-opening { height: 145vh; height: 145svh; }
    .vision-film-frame { clip-path: inset(var(--vision-inset-y, 19%) var(--vision-inset-x, 5%)); }
    .vision-film-still, .vision-film { object-position: 48% center; }
    .vision-opening-copy { display: block; bottom: 17%; }
    .vision-opening-copy h1 { font-size: clamp(4.5rem, 20vw, 6rem); margin-bottom: 1.25rem; }
    .vision-opening-copy > p { font-size: 1rem; max-width: 31ch; line-height: 1.7; margin: 0; }
    .vision-opening-bottom { bottom: 1.25rem; font-size: .75rem; }
    .vision-opening-bottom > a { max-width: 17ch; line-height: 1.6; }
    .vision-motion { right: var(--gutter); bottom: 1.25rem; gap: .4rem; padding-inline: .5rem; }
    .vision-intro, .vision-together { grid-template-columns: 1fr; gap: 2.5rem; }
    .vision-intro h2, .vision-together h2 { font-size: clamp(3rem, 11vw, 4.5rem); max-width: 14ch; }
    .vision-horizon img { aspect-ratio: 2.3; object-position: center; }
    .vision-style { column-gap: 1rem; padding-bottom: 1rem; }
    .vision-style-type { grid-column: 1 / 13; grid-row: 1; padding: 0 0 3rem; }
    .vision-style-type h2 { font-size: clamp(3rem, 12vw, 4.5rem); max-width: 13ch; }
    .vision-style-type p { font-size: 1.6rem; }
    .vision-sunset { grid-column: 1 / 10; grid-row: 2; padding-top: 0; }
    .vision-night { grid-column: 5 / 13; grid-row: 3; margin-top: 3rem; }
    .vision-atlas-intro { grid-template-columns: 1fr; gap: 3rem; }
    .vision-atlas-copy h2 { font-size: clamp(3rem, 11vw, 4.5rem); }
    .vision-guide { width: 8rem; justify-self: end; margin-right: 12%; }
    .vision-guide img { max-height: 19rem; }
    .vision-paths { grid-template-columns: 1fr; gap: 3.5rem; padding-top: 3rem; }
    .vision-path, .vision-path:nth-child(even) { padding: 0 0 1.5rem; }
    .vision-path-art { height: 16rem; margin-bottom: 1.5rem; }
    .vision-path:nth-child(even) .vision-path-art { justify-items: end; }
    .vision-path:nth-child(even) .vision-path-art img { object-position: right bottom; margin-left: auto; }
    .vision-path-1 .vision-path-art img { max-width: 9rem; }
    .vision-path-3 .vision-path-art img { max-width: 15rem; }
    .vision-path-copy h3 { font-size: 2.75rem; }
    .vision-path-arrow { bottom: 1.75rem; }
    .vision-atlas { padding-bottom: 3rem; }
    .vision-signature { margin-top: 5rem; }
}
@media (max-height: 560px) and (min-width: 600px) {
    .vision-stage { min-height: 31rem; }
    .vision-live .vision-opening { height: auto; }
    .vision-live .vision-stage { position: relative; }
    .vision-opening-copy { bottom: 22%; }
    .vision-opening-copy h1 { font-size: 5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .vision-live .vision-opening { height: auto; }
    .vision-live .vision-stage { position: relative; }
    .vision-live [data-vision-depth] { transform: none; }
    .vision-path-art, .vision-path-arrow { transition: none; }
}
@media print {
    .afterspin-vision .site-header, .vision-film, .vision-opening-bottom { display: none; }
    .vision-live .vision-opening { height: auto; }
    .vision-stage { min-height: 24rem; height: 24rem; position: relative !important; }
    .vision-opening-copy { bottom: 2rem; }
    .vision-film-frame { clip-path: none; }
    .vision-live [data-vision-depth] { transform: none; }
    .vision-atlas { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}