/* Existing Back to top corrections also remain active on touch devices. */ #chun-five-stops .back-top span { color: inherit !important; } #chun-five-stops .back-top:hover, #chun-five-stops .back-top:focus-visible { background: #102f4b !important; color: #fff9ee !important; } #chun-five-stops .back-top:focus-visible { outline: 2px solid #102f4b; outline-offset: 3px; } @media (max-width: 550px) { #chun-five-stops .site-nav { gap: 6px; flex-wrap: nowrap; } #chun-five-stops .back-top { width: auto; padding: 8px 7px; font-size: 10px; flex-shrink: 0; } #chun-five-stops .back-top-full { display: inline; } #chun-five-stops .back-top-short { display: none; } } #chun-five-stops .stage-content { position: absolute; inset: 0; } #chun-five-stops .desktop-flow[hidden] { display: none; } #chun-five-stops[data-desktop="flow"] .stage { display: none; } #chun-five-stops[data-desktop="flow"] .journey { height: auto; } #chun-five-stops[data-desktop="flow"] .site-header, #chun-five-stops[data-desktop="flow"] .identity-nav, #chun-five-stops[data-desktop="flow"] .section-switch, #chun-five-stops[data-desktop="flow"] .site-nav { align-items: center; } #chun-five-stops[data-desktop="flow"] .site-nav { flex-wrap: nowrap; } #chun-five-stops[data-desktop="flow"] .brand { line-height: 1; padding-top: 0; padding-bottom: 0; } #chun-five-stops[data-desktop="flow"] .site-header a, #chun-five-stops[data-desktop="flow"] .site-header button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } #chun-five-stops .desktop-about { background: linear-gradient(#acd2ef, #d2e9fa); padding: 42px 7% 38px; min-height: calc(100svh - var(--header-height)); display: flex; flex-direction: column; justify-content: space-between; gap: 30px; } #chun-five-stops .desktop-about-main { display: grid; grid-template-columns: 1.08fr .92fr; gap: 30px; align-items: center; max-width: 1400px; width: 100%; margin: auto; } #chun-five-stops .desktop-about-copy { min-width: 0; } #chun-five-stops .desktop-about .intro-copy { position: static; width: auto; } #chun-five-stops .desktop-about .intro-copy h1 { font-size: clamp(58px, 5.4vw, 82px); } #chun-five-stops .desktop-about .identity { font-size: 19px; } #chun-five-stops .desktop-about .statement { max-width: 100%; font-size: clamp(27px, 2.8vw, 40px); } #chun-five-stops .desktop-about .intro-sub { max-width: 480px; } #chun-five-stops .desktop-intro-person { display: block; height: min(62svh, 620px); max-width: 100%; width: auto; object-fit: contain; justify-self: center; animation: none; } #chun-five-stops .desktop-about .chapter-index { position: static; width: 100%; margin-top: 24px; } #chun-five-stops .desktop-about .chapter-index nav { position: static; width: 100%; max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); } #chun-five-stops .desktop-about .chapter-index button { font-size: 12px; } #chun-five-stops .desktop-statement { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; max-width: 1400px; width: 100%; margin: 0 auto; border-top: 1px solid #102f4b30; padding-top: 25px; } #chun-five-stops .desktop-statement span { font-family: 'Chun Rounded', Arial, sans-serif; font-size: clamp(26px, 3.45vw, 56px); color: transparent; -webkit-text-stroke: 1.5px #102f4b; line-height: 1.25; } #chun-five-stops .desktop-chapter { background: linear-gradient(#d2e9fa 0%, #c8e3f7 28%, var(--chapter-paper) 49%, var(--chapter-paper) 83%, #d2e9fa 100%); } #chun-five-stops .desktop-hero { position: relative; min-height: max(580px, 88svh); overflow: hidden; } #chun-five-stops .desktop-landscape { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; pointer-events: none; mask-image: linear-gradient(#000 85%, transparent); } #chun-five-stops .desktop-outbound { position: absolute; bottom: 10%; left: 32%; transform: translateX(-50%); height: min(57svh, 560px); max-width: 47%; width: auto; object-fit: contain; animation: none; } #chun-five-stops .desktop-hero-copy { position: relative; margin-left: 60%; width: 33%; padding-top: clamp(60px, 10svh, 120px); padding-bottom: 55px; z-index: 2; } #chun-five-stops .desktop-title { font-family: 'Chun Hand', cursive; font-size: clamp(38px, 4.2vw, 66px); letter-spacing: -1px; line-height: 1.13; margin: 20px 0; } #chun-five-stops .desktop-line { font-size: 18px; line-height: 1.55; } #chun-five-stops .desktop-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } #chun-five-stops .desktop-button { min-height: 44px; background: transparent; font-family: 'Chun Mono', monospace; font-size: 11px; } #chun-five-stops button.desktop-button { background: #102f4b; color: #fff9ee; } #chun-five-stops .desktop-button:hover, #chun-five-stops .desktop-button:focus-visible { background: #102f4b; color: #fff9ee; } #chun-five-stops button.desktop-button:hover, #chun-five-stops button.desktop-button:focus-visible { background: #fff9ee; color: #102f4b; } #chun-five-stops .desktop-chapter[data-discipline="publication"] .desktop-outbound, #chun-five-stops .desktop-chapter[data-discipline="digital"] .desktop-outbound, #chun-five-stops .desktop-chapter[data-discipline="copy"] .desktop-outbound { height: min(67svh, 670px); max-width: 49%; left: 36%; bottom: 9%; } #chun-five-stops .desktop-chapter[data-discipline="brand"] .desktop-outbound { height: min(40svh, 390px); max-width: 48%; left: 34%; bottom: 22%; } #chun-five-stops .desktop-chapter[data-discipline="creative"] .desktop-outbound { height: min(65svh, 630px); left: 32%; max-width: 46%; bottom: 10%; } #chun-five-stops .desktop-project { min-height: 76svh; padding: 64px 7% 72px; } #chun-five-stops .desktop-project-grid { display: grid; grid-template-columns: minmax(150px, .6fr) minmax(0, 1.25fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 3vw, 52px); max-width: 1500px; margin: 0 auto; } #chun-five-stops .desktop-return-art { min-width: 0; align-self: center; } #chun-five-stops .desktop-returning { display: block; width: 100%; max-height: 340px; object-fit: contain; animation: none; } #chun-five-stops .desktop-project-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; } #chun-five-stops .desktop-selected { display: block; width: 100%; letter-spacing: 1.6px; padding-top: 16px; border-top: 1px solid #102f4b30; } #chun-five-stops .desktop-meta { display: block; margin-top: 3px; } #chun-five-stops .desktop-project-title { font-family: Arial, 'Chun TC', sans-serif; font-size: clamp(23px, 2.25vw, 34px); line-height: 1.25; margin: 0; overflow-wrap: anywhere; } #chun-five-stops .desktop-project-copy p { font-size: 15px; line-height: 1.75; margin: 0; } #chun-five-stops .desktop-summary-tc { font-family: 'Chun TC', Arial, sans-serif; } #chun-five-stops .desktop-project-visual { min-width: 0; } #chun-five-stops .desktop-work-image { display: block; width: 100%; height: auto; max-height: 460px; object-fit: contain; } #chun-five-stops .desktop-project-actions { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 48px auto 0; max-width: 1500px; } #chun-five-stops .desktop-reveal { opacity: 0; transform: translateY(14px); transition: opacity .65s ease-out, transform .65s ease-out; } #chun-five-stops .desktop-reveal.is-visible { opacity: 1; transform: none; } @media (max-width: 1100px) { #chun-five-stops .desktop-about { padding-top: 30px; } #chun-five-stops .desktop-about .intro-copy h1 { font-size: 58px; } #chun-five-stops .desktop-about .chapter-index nav { gap: 2px 10px; } #chun-five-stops .desktop-about .chapter-index button { font-size: 11px; } #chun-five-stops .desktop-project-grid { grid-template-columns: minmax(140px, .5fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; } #chun-five-stops .desktop-project-copy p { font-size: 14px; } } @media (prefers-reduced-motion: reduce) { #chun-five-stops .desktop-reveal { opacity: 1; transform: none; transition: none; } } /* Compact the opening so the declaration belongs to the first composition. */ #chun-five-stops .desktop-about { padding-top: 26px; padding-bottom: 22px; gap: 20px; } #chun-five-stops .desktop-about .intro-copy h1 { font-size: clamp(54px, 4.8vw, 72px); margin: 10px 0; } #chun-five-stops .desktop-about .identity { margin: 8px 0; } #chun-five-stops .desktop-about .statement { font-size: clamp(27px, 2.4vw, 36px); margin: 16px 0 8px; } #chun-five-stops .desktop-about .intro-sub { margin: 12px 0; } #chun-five-stops .desktop-about .chapter-index { margin-top: 18px; } #chun-five-stops .desktop-about .chapter-index button { min-height: 32px; padding-top: 6px; padding-bottom: 6px; } #chun-five-stops .desktop-statement { padding-top: 20px; } #chun-five-stops .desktop-statement span { font-size: clamp(25px, 3vw, 48px); } #chun-five-stops .desktop-reveal:focus-within { opacity: 1; transform: none; } /* One chapter trials a soft, scroll-revealed edge. Artwork stays in normal flow. */ #chun-five-stops .desktop-rise-trial.desktop-reveal { opacity: 1; transform: none; transition: none; } #chun-five-stops .desktop-rise-trial { padding-top: clamp(60px, 10svh, 120px); } #chun-five-stops .desktop-rise-text { --reveal-edge: -10%; transform: translateY(var(--rise-offset, 70px)); mask-image: linear-gradient(to bottom, #000 calc(var(--reveal-edge) - 45%), transparent var(--reveal-edge)); -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--reveal-edge) - 45%), transparent var(--reveal-edge)); } #chun-five-stops .desktop-rise-trial:focus-within .desktop-rise-text { mask-image: none; -webkit-mask-image: none; } @media (prefers-reduced-motion: reduce) { #chun-five-stops .desktop-rise-text { transform: none; } } #chun-five-stops .desktop-chapter[data-discipline="brand"] .desktop-outbound { bottom: 32%; } #chun-five-stops .desktop-chapter[data-discipline="brand"] .desktop-return-art { position: relative; } #chun-five-stops .desktop-chapter[data-discipline="brand"] .desktop-project { overflow: hidden; } #chun-five-stops .desktop-chapter[data-discipline="brand"] .desktop-return-art::before { content: ''; position: absolute; width: var(--rope-width, 0px); height: 200px; background: repeating-linear-gradient(155deg,#ffbd45 0 7px,#e99b22 7px 10px); bottom: var(--rope-bottom,100%); left: var(--rope-left,0px); } #chun-five-stops .career-stop:first-child .career-dot { background: #d2e9fa; } #chun-five-stops .career-stop:last-child .career-dot { background: var(--ink); } @media (max-width: 900px) { #chun-five-stops .opening-curtain { opacity: .72; } #chun-five-stops .opening-curtain .cloud-fill { display: none !important; } #chun-five-stops .sky-words { inset: 14% 7% auto; padding: 0; justify-content: flex-start; } #chun-five-stops .sky-words span { font-family: 'Chun Rounded', Arial, sans-serif; line-height: 1.45; -webkit-text-stroke: 1.4px #102f4b; } } #chun-five-stops .desktop-statement-bridge { position: relative; padding: 45px 7% 65px; background: #d2e9fa; } #chun-five-stops .desktop-statement { display: flex; flex-direction: column; gap: 30px; border: 0; padding: 0; } #chun-five-stops .desktop-statement span { display: block; width: fit-content; white-space: nowrap; font-size: clamp(32px,4.1vw,66px); line-height: 1.25; } #chun-five-stops .desktop-statement span:nth-child(2) { align-self: center; } #chun-five-stops .desktop-statement span:nth-child(3) { align-self: flex-end; } #chun-five-stops .desktop-scroll-reveal { mask-image: linear-gradient(#000 calc(var(--reveal-edge,150%) - 45%),transparent var(--reveal-edge,150%)); } #chun-five-stops[data-desktop="flow"] .desktop-about,#chun-five-stops[data-desktop="flow"] #career { position: relative; } #chun-five-stops .desktop-birds { position: absolute; inset: 0; pointer-events: none; z-index: 1; } #chun-five-stops .desktop-bird { position: absolute; display: flex; width: 44px; height: 18px; opacity: .65; } #chun-five-stops .desktop-bird i { width: 23px; height: 14px; border-top: 2px solid #36536d; border-radius: 50%; transform: rotate(17deg); } #chun-five-stops .desktop-bird i+i { transform: rotate(-17deg); margin-left: -2px; } #chun-five-stops .desktop-bird:nth-child(1) { left: 10%; top: 5%; } #chun-five-stops .desktop-bird:nth-child(2) { left: 51%; top: 7%; scale: .85; } #chun-five-stops .desktop-bird:nth-child(3) { right: 9%; top: 4%; scale: .75; } #chun-five-stops .desktop-bird:nth-child(4) { left: 26%; top: 3%; scale: .8; } #chun-five-stops .desktop-statement-bridge .desktop-bird:nth-child(1) { left: 72%; top: 12%; } #chun-five-stops .desktop-statement-bridge .desktop-bird:nth-child(2) { left: 12%; top: 55%; } #chun-five-stops[data-desktop="flow"] #career .desktop-birds { display: block; } #chun-five-stops:not([data-desktop="flow"]) .desktop-birds { display: none; } @media (max-width: 900px) { #chun-five-stops .work-collection { display: none !important; } } #chun-five-stops .desktop-project { position: relative; } #chun-five-stops .desktop-project > .desktop-birds { top: auto; height: 60px; bottom: 8px; } #chun-five-stops[data-desktop="flow"] .career-birds { display: none; } #chun-five-stops[data-desktop="flow"] #career .desktop-bird:nth-child(1) { left: 46%; top: 15px; } #chun-five-stops[data-desktop="flow"] #career .desktop-bird:nth-child(2) { left: 73%; top: 27px; } #chun-five-stops[data-desktop="flow"] #career .desktop-bird:nth-child(3) { right: 9%; top: 10px; } /* Preserve the wide book arc while fitting the complete composition in view. */ #chun-five-stops .desktop-chapter[data-discipline="creative"] .desktop-landscape { height: min(35svh, 340px); object-fit: cover; object-position: center bottom; mask-image: linear-gradient(transparent, #000 12%, #000 85%, transparent); } #chun-five-stops .desktop-declaration-row { width: fit-content; position: relative; isolation: isolate; } #chun-five-stops .desktop-declaration-row:nth-child(2) { align-self: center; } #chun-five-stops .desktop-declaration-row:nth-child(3) { align-self: flex-end; } #chun-five-stops .desktop-declaration-row span { position: relative; z-index: 2; } #chun-five-stops .desktop-declaration-cloud { position: absolute; pointer-events: none; left: -12%; top: 5%; width: clamp(420px, 43vw, 680px); max-width: none; height: 170px; object-fit: fill; opacity: .48; filter: blur(2px); mask-image: radial-gradient(ellipse, #000 28%, transparent 75%); animation: declaration-cloud-drift 18s ease-in-out infinite; z-index: 1; } #chun-five-stops .desktop-declaration-row:nth-child(2) .desktop-declaration-cloud { left: -45%; width: clamp(500px, 50vw, 760px); height: 210px; opacity: .35; animation-delay: -6s; animation-duration: 23s; } #chun-five-stops .desktop-declaration-row:nth-child(3) .desktop-declaration-cloud { left: -2%; width: clamp(450px, 46vw, 720px); height: 145px; opacity: .58; animation-delay: -12s; animation-duration: 20s; } #chun-five-stops .desktop-statement-bridge { overflow: hidden; padding-bottom: 130px; } #chun-five-stops .desktop-declaration-row.desktop-scroll-reveal { mask-image: none; } #chun-five-stops .desktop-declaration-row.desktop-scroll-reveal span { mask-image: linear-gradient(#000 calc(var(--reveal-edge,150%) - 45%),transparent var(--reveal-edge,150%)); } @keyframes declaration-cloud-drift { 0% { transform: translate(0,65px); opacity: 0; } 20% { opacity: .5; } 75% { opacity: .4; } 100% { transform: translate(25px,-90px); opacity: 0; } } #chun-five-stops .motion-footer { display: none !important; } #chun-five-stops .desktop-scroll-reveal:focus-within { mask-image: none; } @media (prefers-reduced-motion: reduce) { #chun-five-stops .desktop-declaration-cloud { animation: none; } } /* Compact cloud passage: native scrolling reveals words, then the upper veil. */ #chun-five-stops .desktop-statement-bridge { min-height: 440px; padding: 70px 7% 100px; } #chun-five-stops .desktop-statement { position: relative; z-index: 2; gap: 35px; } #chun-five-stops .desktop-cloud-veil { position: absolute; inset: 0; pointer-events: none; z-index: 3; } #chun-five-stops .desktop-veil-cloud { position: absolute; width: 65%; height: 200px; object-fit: fill; max-width: none; filter: blur(3px); mask-image: radial-gradient(ellipse,#000 30%,transparent 75%); transform: translateY(var(--cloud-rise,0px)); opacity: .32; } #chun-five-stops .desktop-veil-cloud:nth-child(1), #chun-five-stops .desktop-veil-cloud:nth-child(2) { display: none; } #chun-five-stops .desktop-veil-cloud:nth-child(3) { left: -20%; top: 70%; width: 90%; height: 230px; } #chun-five-stops .desktop-veil-cloud:nth-child(4) { right: -20%; top: 58%; width: 85%; height: 280px; opacity: .4; } #chun-five-stops .desktop-veil-cloud:nth-child(n+5) { opacity: var(--cloud-cover,0); width: 110%; height: 260px; left: -5%; } #chun-five-stops .desktop-veil-cloud:nth-child(5) { top: 15%; } #chun-five-stops .desktop-veil-cloud:nth-child(6) { top: 45%; left: -25%; } #chun-five-stops .desktop-veil-cloud:nth-child(7) { top: 65%; left: 15%; } #chun-five-stops .desktop-bird { width: 31px; height: 13px; } #chun-five-stops .desktop-bird i { width: 16px; height: 10px; border-top-width: 1.4px; } #chun-five-stops .desktop-career-cloud { position: relative; height: clamp(220px, 22vw, 340px); overflow: hidden; background: #d2e9fa; } #chun-five-stops .desktop-career-cloud img { position: absolute; width: 110%; max-width: none; height: auto; left: -5%; bottom: -12%; opacity: .9; mask-image: linear-gradient(transparent,#000 28%,#000 80%,transparent); } @media(max-width:550px) { #chun-five-stops .site-nav { display: flex; justify-content: space-between; width: 100%; gap: 5px; } #chun-five-stops .site-nav .back-top { margin-left: auto; padding: 8px 7px; min-height: 38px; } #chun-five-stops .site-nav a { font-size: 10px; padding: 8px 0; } } @media(max-width:550px) { #chun-five-stops .site-nav a, #chun-five-stops .site-nav .back-top { display: inline-flex; align-items: center; justify-content: center; } } #chun-five-stops .desktop-declaration-row.desktop-scroll-reveal span { mask-image: none; transform: translateY(var(--rise-offset,70px)); } #chun-five-stops .desktop-word-cloud { position: absolute; z-index: 3; pointer-events: none; top: 15%; left: -30%; width: max(900px,90vw); height: auto; max-width: none; opacity: var(--word-cloud-opacity,.95); mask-image: radial-gradient(ellipse,#000 45%,transparent 75%); } #chun-five-stops .desktop-declaration-row:nth-child(2) .desktop-word-cloud { left: -120%; } #chun-five-stops .desktop-declaration-row:nth-child(3) .desktop-word-cloud { left: -100%; } #chun-five-stops .desktop-cloud-veil { display: none; } #chun-five-stops .desktop-statement-bridge { overflow: visible; padding-bottom: 100px; } #chun-five-stops .desktop-career-cloud { margin-bottom: -1px; background: linear-gradient(#fffaf0,#d2e9fa); } #chun-five-stops .mobile-career-join { position: absolute; top: -200px; left: 0; right: 0; height: 235px; overflow: hidden; pointer-events: none; } #chun-five-stops .mobile-career-join img { position: absolute; width: 320%; max-width: none; left: -110%; bottom: 0; height: auto; mask-image: linear-gradient(transparent,#000 25%,#000 85%,transparent); } #chun-five-stops:not([data-desktop="flow"]) #career { position: relative; } #chun-five-stops[data-desktop="flow"] .mobile-career-join { display: none; } @media(max-width:900px) { #chun-five-stops .opening-curtain .cloud-fill { display: block !important; background: #d2e9fa; } #chun-five-stops .opening-curtain { opacity: 1; } #chun-five-stops .closing-curtain { display: none; } } #chun-five-stops .desktop-statement-bridge { overflow: hidden; } #chun-five-stops .desktop-career-cloud { background: #d2e9fa; } /* Boundary clouds occupy their own space and travel with document flow. */ #chun-five-stops .section-cloud-boundary { position: relative; height: clamp(120px,15vw,210px); background: #d2e9fa; overflow: visible; margin: 0; } #chun-five-stops .section-cloud-boundary svg { display: block; width: 100%; height: 100%; overflow: visible; } #chun-five-stops .desktop-statement-bridge { padding-top: 22px; padding-bottom: 55px; min-height: 0; } #chun-five-stops .desktop-declaration-row span { transform: none !important; } #chun-five-stops .mobile-intro-flow, #chun-five-stops .mobile-career-cloud { display: none; } #chun-five-stops:not([data-desktop="flow"]) .mobile-intro-flow, #chun-five-stops:not([data-desktop="flow"]) .mobile-career-cloud { display: block; } #chun-five-stops .mobile-about-flow { padding: 30px 7% 20px; background: linear-gradient(#acd2ef,#d2e9fa); } #chun-five-stops .mobile-about-flow .intro-copy { position: static; width: auto; } #chun-five-stops .mobile-intro-person { display: block; width: auto; height: 230px; max-width: 85%; object-fit: contain; margin: 12px 0 12px auto; } #chun-five-stops .mobile-about-flow .chapter-index { position: static; width: 100%; margin: 14px 0 0; } #chun-five-stops .mobile-about-flow .chapter-index nav { position: static; width: 100%; } #chun-five-stops .mobile-declarations { display: flex; flex-direction: column; gap: 8px; padding: 8px 7% 30px; background: #d2e9fa; } #chun-five-stops .mobile-declarations span { font-family: 'Chun Rounded',Arial,sans-serif; font-size: clamp(26px,7.8vw,42px); color: transparent; -webkit-text-stroke: 1.4px #102f4b; line-height: 1.4; } #chun-five-stops:not([data-desktop="flow"]) .stage-content > .opening, #chun-five-stops:not([data-desktop="flow"]) .stage-content > .sky-words, #chun-five-stops:not([data-desktop="flow"]) .curtain { display: none !important; } #chun-five-stops:not([data-desktop="flow"]) #career { padding-top: 12px; } /* Painterly banks bridge the actual background join; text stays outside them. */ #chun-five-stops .section-cloud-boundary { --cloud-above: #d2e9fa; --cloud-below: #d2e9fa; height: clamp(190px,25vw,360px); background: linear-gradient(var(--cloud-above) 49%,var(--cloud-below) 51%); overflow: hidden; isolation: isolate; } #chun-five-stops .section-cloud-boundary .boundary-cloud { position: absolute; inset: 0 auto auto -8%; width: 116%; max-width: none; height: 100%; object-fit: fill; opacity: var(--cloud-opacity,1); mask-image: none; } #chun-five-stops .desktop-about-cloud .boundary-cloud, #chun-five-stops .mobile-about-cloud .boundary-cloud { mask-image: linear-gradient(#000 58%,rgba(0,0,0,.82) 77%,transparent 100%); } #chun-five-stops .desktop-statement-bridge { padding: 14px 7% 24px; overflow: visible; } #chun-five-stops .desktop-statement, #chun-five-stops .mobile-declarations { position: relative; z-index: 4; } #chun-five-stops .desktop-video-cloud { height: clamp(160px,20vw,280px); } #chun-five-stops .desktop-video-cloud .boundary-cloud { transform: scaleX(-1); } #chun-five-stops .desktop-chapter[data-discipline="creative"] .desktop-project { background: #fffaf0; } #chun-five-stops .desktop-career-cloud, #chun-five-stops .mobile-career-cloud { --cloud-above: #fffaf0; margin-bottom: -1px; } #chun-five-stops .desktop-career-cloud .boundary-cloud { transform: scaleX(-1); } #chun-five-stops .mobile-declarations { padding-top: 8px; padding-bottom: 18px; } @media(max-width:900px) { #chun-five-stops .section-cloud-boundary { height: 170px; } #chun-five-stops .section-cloud-boundary .boundary-cloud { width: 210%; left: -55%; } #chun-five-stops .mobile-career-cloud { height: 190px; } } /* Fade the corridor itself into the bank rather than leaving a rectangular edge. */ #chun-five-stops:not([data-desktop="flow"])[data-paper="creative"] .work-backdrop { mask-image: linear-gradient(#000 calc(100% - 85px),transparent 100%); } #chun-five-stops .mobile-declarations span { will-change: opacity,transform; } /* Three offset banks add depth; declaration motion comes from scrolling. */ #chun-five-stops .section-cloud-boundary { height: clamp(240px,29vw,410px); } #chun-five-stops .section-cloud-boundary .boundary-cloud { height: 76%; top: -3%; } #chun-five-stops .section-cloud-boundary .cloud-layer-1 { top: 12%; left: -16%; width: 132%; transform: scaleX(-1); opacity: calc(var(--cloud-opacity,1) * .85); } #chun-five-stops .section-cloud-boundary .cloud-layer-2 { top: 25%; left: -3%; width: 115%; opacity: var(--cloud-opacity,1); } #chun-five-stops .desktop-word-window { overflow: hidden; padding: 5px 0; } #chun-five-stops .desktop-statement-bridge { overflow-x: clip; overflow-y: visible; } #chun-five-stops .desktop-declaration-row span { transform: translateY(var(--word-rise,100%)) !important; opacity: 1; } #chun-five-stops .desktop-emergence-cloud { position: absolute; z-index: 3; width: 170%; max-width: none; height: 150px; left: -35%; top: 12px; object-fit: fill; pointer-events: none; opacity: var(--word-cloud-opacity,.9); mask-image: radial-gradient(ellipse,#000 35%,transparent 75%); } #chun-five-stops .desktop-declaration-row:nth-child(2) .desktop-emergence-cloud { transform: scaleX(-1); } #chun-five-stops .mobile-declaration-line { overflow: hidden; padding: 3px 0; } #chun-five-stops .mobile-declaration-line span { display: block; opacity: 1; transform: translateX(-110%); will-change: transform; } @media(max-width:900px) { #chun-five-stops .section-cloud-boundary { height: 210px; } #chun-five-stops .mobile-career-cloud { height: 240px; } #chun-five-stops .section-cloud-boundary .cloud-layer-1 { left: -85%; width: 250%; } #chun-five-stops .section-cloud-boundary .cloud-layer-2 { left: -40%; width: 210%; } } /* Cartoon cloud silhouettes match the character illustration. */ #chun-five-stops .desktop-video-cloud { height: clamp(310px,35vw,520px); } #chun-five-stops .desktop-video-cloud .cloud-layer-2 { top: 29%; height: 70%; width: 125%; left: -13%; } #chun-five-stops .mobile-declarations { min-height: var(--declaration-view-height,100svh); box-sizing: border-box; justify-content: center; gap: 24px; padding: 130px 7% 140px; isolation: isolate; } #chun-five-stops .mobile-declarations::before, #chun-five-stops .mobile-declarations::after { content: ''; position: absolute; left: -15%; width: 130%; height: 170px; background: url('/motion-assets/cloud-bank-cartoon.webp') center / 100% 100% no-repeat; pointer-events: none; z-index: -1; } #chun-five-stops .mobile-declarations::before { top: -45px; opacity: .85; } #chun-five-stops .mobile-declarations::after { bottom: -12px; transform: scaleX(-1); } #chun-five-stops .mobile-intro-flow { overflow-x: clip; } /* One continuous irregular bank, with no repeated horizontal layers. */ #chun-five-stops .section-cloud-boundary { background: linear-gradient(var(--cloud-above) 15%,var(--cloud-below) 80%); } #chun-five-stops .section-cloud-boundary .boundary-cloud { top: 0; height: 100%; width: 120%; left: -10%; } #chun-five-stops .desktop-statement-bridge { position: relative; padding-bottom: 380px; } #chun-five-stops .desktop-shared-cloud { position: absolute; z-index: 5; pointer-events: none; top: var(--shared-cloud-top,-150px); left: -12%; width: 124%; max-width: none; height: 350px; object-fit: fill; } #chun-five-stops .desktop-word-window { overflow: visible; } #chun-five-stops .mobile-declaration-passage { position: relative; height: calc(var(--declaration-view-height,85svh) + var(--declaration-scroll-distance,100svh)); } #chun-five-stops .mobile-declarations { position: sticky; top: var(--mobile-declaration-top,110px); height: var(--declaration-view-height,85svh); min-height: 0; } #chun-five-stops .mobile-declaration-passage .mobile-declarations { width: 100%; } #chun-five-stops .mobile-declarations::after { bottom: 12px; } @media(max-width:900px) { #chun-five-stops .section-cloud-boundary .boundary-cloud { width: 180%; left: -40%; } } /* The mobile sky has one cloud at each edge, with no extra entrance bank. */ #chun-five-stops .mobile-declarations { overflow: hidden; } #chun-five-stops .mobile-declarations::before, #chun-five-stops .mobile-declarations::after { width: 180%; left: -40%; height: 330px; opacity: 1; } #chun-five-stops .mobile-declarations::before { top: -180px; } #chun-five-stops .mobile-declarations::after { bottom: -180px; } #chun-five-stops .mobile-declarations { background: linear-gradient(#fff9ee 0 15px,#d2e9fa 40px,#d2e9fa calc(100% - 60px),#fff9ee calc(100% - 20px)); } #chun-five-stops .mobile-declarations::after { bottom: -65px; height: 300px; } /* Native flow carries a dense asymmetric cloud field upward before the words. */ #chun-five-stops .desktop-cloud-crossing { position: relative; height: clamp(430px,65svh,680px); background: #d2e9fa; overflow: hidden; } #chun-five-stops .desktop-crossing-cloud { position: absolute; max-width: none; pointer-events: none; height: 74%; object-fit: fill; } #chun-five-stops .crossing-cloud-0 { left: -28%; width: 118%; top: -8%; } #chun-five-stops .crossing-cloud-1 { right: -29%; width: 108%; top: 14%; transform: scaleX(-1); } #chun-five-stops .crossing-cloud-2 { left: -8%; width: 124%; top: 43%; height: 58%; } #chun-five-stops .desktop-statement-bridge { padding: 20px 7% 75px; } #chun-five-stops .desktop-declaration-row span { opacity: var(--declaration-opacity,0); transform: translateY(calc(var(--word-rise,100%) * .35)) !important; } /* Preserve the entire silhouette as the sticky sky enters and leaves. */ #chun-five-stops .mobile-about-flow { padding-bottom: 130px; } #chun-five-stops .mobile-intro-flow { padding-bottom: 105px; background: #d2e9fa; } #chun-five-stops .mobile-declarations { overflow: visible; background: #d2e9fa; } #chun-five-stops .mobile-declarations::before { top: -110px; height: 270px; } #chun-five-stops .mobile-declarations::after { bottom: -100px; height: 270px; } /* Fill the left opening without creating a repeated horizontal band. */ #chun-five-stops .desktop-cloud-crossing { background: linear-gradient(#d2e9fa 5%,#94bddb 100%); } #chun-five-stops .crossing-cloud-3 { left: -43%; width: 110%; top: 13%; height: 72%; transform: scaleX(-1) rotate(-8deg); } #chun-five-stops .desktop-statement-bridge { background: linear-gradient(#94bddb,#b6d6ed 48%,#d2e9fa 100%); } /* Give the desktop sky more room to soften into the Video chapter. */ #chun-five-stops .desktop-cloud-crossing { background: linear-gradient(#d2e9fa 5%,#689bc3 100%); } #chun-five-stops .desktop-statement-bridge { padding-bottom: clamp(210px,30svh,360px); background: linear-gradient(#689bc3 0%,#91bad9 36%,#bbd9ee 72%,#d2e9fa 100%); } /* About has gentle ambient motion; portfolio birds remain still. */ #chun-five-stops .mobile-about-flow { position: relative; } #chun-five-stops .mobile-about-flow > .desktop-birds { display: block; top: 48%; bottom: 15%; } #chun-five-stops .desktop-intro-person, #chun-five-stops .mobile-intro-person { animation: about-float 5.5s ease-in-out infinite; } #chun-five-stops .desktop-about .desktop-bird, #chun-five-stops .mobile-about-flow .desktop-bird { animation: about-bird 13s ease-in-out infinite alternate; } #chun-five-stops .desktop-about .desktop-bird:nth-child(2), #chun-five-stops .mobile-about-flow .desktop-bird:nth-child(2) { animation-delay: -6s; animation-duration: 17s; } @keyframes about-float { 0%,100% { translate: 0 0; } 50% { translate: 3px -11px; } } @keyframes about-bird { from { translate: -18px 7px; } to { translate: 35px -10px; } } #chun-five-stops:not([data-desktop="flow"]) .work-visual { height: auto; min-height: 0; } #chun-five-stops:not([data-desktop="flow"]) .work-image { display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; } #chun-five-stops:not([data-desktop="flow"]) .work-copy { row-gap: 16px; } @media(prefers-reduced-motion:reduce) { #chun-five-stops .desktop-intro-person, #chun-five-stops .mobile-intro-person, #chun-five-stops .desktop-about .desktop-bird, #chun-five-stops .mobile-about-flow .desktop-bird { animation: none; } } /* Desktop declarations sit between complete cloud silhouettes. */ #chun-five-stops[data-desktop="flow"] .desktop-cloud-crossing { overflow: visible; z-index: 2; } #chun-five-stops[data-desktop="flow"] .desktop-statement-bridge { overflow: visible; min-height: 0; padding: 42px 7% 0; } #chun-five-stops[data-desktop="flow"] .desktop-statement span { -webkit-text-stroke: 1.7px #fffaf0; } #chun-five-stops[data-desktop="flow"] .desktop-statement-bridge::after { content: ''; display: block; position: relative; z-index: 3; width: 116.28%; margin: 26px -8.14% 0; height: clamp(160px,23svh,250px); background: url('/motion-assets/cloud-bank-cartoon.webp') center / 100% 100% no-repeat; transform: scaleX(-1); pointer-events: none; } #chun-five-stops[data-desktop="flow"] .desktop-flow { overflow-x: clip; overflow-y: visible; } #chun-five-stops[data-desktop="flow"] .desktop-statement { gap: clamp(18px,3svh,30px); } /* White lettering emerges left to right over a deeper, continuous sky. */ #chun-five-stops[data-desktop="flow"] .desktop-cloud-crossing { background: linear-gradient(#d2e9fa 5%,#3f739d 100%); } #chun-five-stops[data-desktop="flow"] .desktop-statement-bridge { background: linear-gradient(#3f739d 0%,#6c9cbe 42%,#b6d7ed 78%,#d2e9fa 100%); } #chun-five-stops[data-desktop="flow"] .desktop-statement-bridge::after { display: none; } #chun-five-stops .desktop-declaration-exit-clouds { position: relative; height: clamp(270px,38svh,400px); margin: 24px -8.14% 0; pointer-events: none; } #chun-five-stops .desktop-exit-cloud { position: absolute; max-width: none; object-fit: fill; } #chun-five-stops .exit-cloud-0 { width: 112%; height: 78%; left: -7%; top: 0; transform: scaleX(-1); } #chun-five-stops .exit-cloud-1 { width: 135%; height: 76%; left: -23%; top: 24%; transform: rotate(3deg); } /* Independent translate/rotate leave scroll entrances and rope alignment intact. */ #chun-five-stops .desktop-intro-person, #chun-five-stops .mobile-intro-person, #chun-five-stops .desktop-outbound, #chun-five-stops .desktop-return-art, #chun-five-stops .outbound, #chun-five-stops .returning, #chun-five-stops .intro-person { animation: character-hover 6.8s ease-in-out infinite; transform-origin: 50% 65%; } #chun-five-stops .desktop-chapter:nth-child(even) .desktop-outbound, #chun-five-stops .desktop-return-art { animation-duration: 7.7s; animation-delay: -2.8s; } @keyframes character-hover { 0%,100% { translate: 0 0; rotate: -.45deg; } 50% { translate: 3px -7px; rotate: .45deg; } } @media(prefers-reduced-motion:reduce) { #chun-five-stops .desktop-intro-person, #chun-five-stops .mobile-intro-person, #chun-five-stops .desktop-outbound, #chun-five-stops .desktop-return-art, #chun-five-stops .outbound, #chun-five-stops .returning, #chun-five-stops .intro-person { animation: none; } } /* A short native scroll hold keeps the complete cloud scene in view. */ #chun-five-stops[data-desktop="flow"] .desktop-statement-bridge { min-height: calc(100svh - var(--declaration-header,90px) + clamp(260px,42svh,420px)); } #chun-five-stops .desktop-declaration-scene { position: sticky; top: var(--declaration-header,90px); height: calc(100svh - var(--declaration-header,90px)); display: flex; flex-direction: column; justify-content: space-between; } #chun-five-stops .desktop-declaration-scene .desktop-statement { flex: 0 0 auto; } #chun-five-stops .desktop-declaration-scene .desktop-declaration-exit-clouds { flex: 0 0 auto; } #chun-five-stops .exit-cloud-2 { width: 98%; height: 88%; right: -26%; top: 8%; transform: scaleX(-1) rotate(-4deg); } /* Reveal all three declarations across the entrance and the longer hold. */ #chun-five-stops[data-desktop="flow"] .desktop-statement-bridge { min-height: calc(100svh - var(--declaration-header,90px) + var(--declaration-hold,clamp(420px,60svh,640px))); } #chun-five-stops .mobile-return-rig { position: absolute; inset: 0; z-index: 6; pointer-events: none; animation: character-hover 7.7s ease-in-out infinite; animation-delay: -2.8s; } #chun-five-stops .mobile-return-rig .returning { animation: none; translate: none; rotate: none; transform-origin: 50% 15%; } @media(prefers-reduced-motion:reduce) { #chun-five-stops .mobile-return-rig { animation: none; } } /* Complete the declarations before the native reading hold begins. */ #chun-five-stops .desktop-video-sky { height: clamp(120px,22.5svh,240px); background: #d2e9fa; position: relative; z-index: 5; } #chun-five-stops .desktop-hero-passage { position: relative; height: calc(max(580px,100svh - var(--chapter-header,90px)) + var(--chapter-hold,450px)); } #chun-five-stops .desktop-hero-passage .desktop-hero { position: sticky; top: var(--chapter-header,90px); min-height: max(580px,100svh - var(--chapter-header,90px)); background: linear-gradient(#d2e9fa 0%,#d2e9fa 60%,var(--chapter-paper) 100%); } #chun-five-stops .mobile-declaration-passage { background: linear-gradient(#3f739d,#6c9cbe 42%,#b6d7ed 78%,#d2e9fa); } #chun-five-stops .mobile-declarations { background: linear-gradient(#3f739d,#6c9cbe 42%,#b6d7ed 78%,#d2e9fa); } #chun-five-stops .mobile-declarations span { -webkit-text-stroke: 1.5px #fffaf0; } #chun-five-stops .desktop-declaration-scene .desktop-statement { padding-top: clamp(80px,12svh,120px); position: relative; z-index: 2; } #chun-five-stops .desktop-declaration-canopy { position: absolute; width: 130%; max-width: none; left: -15%; top: -120px; height: 200px; object-fit: fill; pointer-events: none; } #chun-five-stops .mobile-about-flow { background: linear-gradient(#acd2ef 0%,#d2e9fa 70%,#3f739d 100%); } /* Let cloud tails overlap the sky instead of slicing them at its edge. */ #chun-five-stops .desktop-video-sky { z-index: auto; } #chun-five-stops .desktop-declaration-row span { opacity: 1; transform: none !important; mask-image: linear-gradient(90deg,#000 calc(var(--declaration-edge,0%) - 20%),transparent var(--declaration-edge,0%)); } #chun-five-stops .desktop-declaration-canopy { opacity: 0; } #chun-five-stops .desktop-project-passage { position: relative; } #chun-five-stops .desktop-project-passage .desktop-project { position: sticky; top: var(--project-rest-top,90px); min-height: calc(100svh - var(--chapter-header,90px)); box-sizing: border-box; } /* Motion follows the pose: feet and seats anchor a sway; airborne art bobs. */ #chun-five-stops .desktop-intro-person, #chun-five-stops .mobile-intro-person { animation: pose-float 5.8s ease-in-out infinite; } #chun-five-stops .desktop-outbound { animation: pose-walk 4.8s ease-in-out infinite; transform-origin: 70% 96%; } #chun-five-stops [data-discipline="publication"] .desktop-outbound { animation: pose-seat 6.2s ease-in-out infinite; transform-origin: 35% 90%; } #chun-five-stops [data-discipline="digital"] .desktop-outbound { animation: pose-seat 5.4s ease-in-out infinite; transform-origin: 60% 95%; } #chun-five-stops [data-discipline="copy"] .desktop-outbound, #chun-five-stops [data-discipline="creative"] .desktop-outbound { animation: pose-seat 6.8s ease-in-out infinite; transform-origin: 50% 96%; } #chun-five-stops [data-discipline="brand"] .desktop-outbound { animation: pose-float 5.2s ease-in-out infinite; } #chun-five-stops .desktop-return-art { animation: pose-seat 6.6s ease-in-out infinite; transform-origin: 50% 95%; } #chun-five-stops [data-discipline="brand"] .desktop-return-art { animation: pose-rope 6.4s ease-in-out infinite; transform-origin: var(--rope-left,16%) -150px; } #chun-five-stops .outbound { animation: pose-walk 5.2s ease-in-out infinite; transform-origin: 70% 96%; } #chun-five-stops[data-paper="publication"] .outbound, #chun-five-stops[data-paper="digital"] .outbound, #chun-five-stops[data-paper="copy"] .outbound, #chun-five-stops[data-paper="creative"] .outbound { animation: pose-seat 6s ease-in-out infinite; } #chun-five-stops .mobile-return-rig { animation: pose-float 6.6s ease-in-out infinite; } #chun-five-stops[data-paper="brand"] .mobile-return-rig { animation: pose-rope 6.4s ease-in-out infinite; transform-origin: 50% 0; } @keyframes pose-float { 0%,100% { translate: 0 0; rotate: -.6deg; } 50% { translate: 2px -10px; rotate: .6deg; } } @keyframes pose-walk { 0%,100% { translate: 0 0; rotate: -.7deg; } 50% { translate: 0 -4px; rotate: .7deg; } } @keyframes pose-seat { 0%,100% { translate: 0 0; rotate: -.5deg; } 50% { translate: 0 -3px; rotate: .5deg; } } @keyframes pose-rope { 0%,100% { rotate: -1deg; } 50% { rotate: 1deg; } } #chun-five-stops[data-desktop="flow"] .desktop-flow { background: #d2e9fa; } #chun-five-stops .desktop-video-sky { background: transparent; } #chun-five-stops .desktop-declaration-row.desktop-scroll-reveal span { mask-image: linear-gradient(90deg,#000 calc(var(--declaration-edge,0%) - 20%),transparent var(--declaration-edge,0%)); } /* Category colors carry from the homepage into their collections. */ #chun-five-stops .desktop-chapter[data-discipline="video"] { --discipline-top:#507f97; --discipline-sky:#bdd8e9; } #chun-five-stops .desktop-chapter[data-discipline="publication"] { --discipline-top:#e0e9da; --discipline-sky:#f8f0dc; } #chun-five-stops .desktop-chapter[data-discipline="brand"] { --discipline-top:#8c7699; --discipline-sky:#d9c7df; } #chun-five-stops .desktop-chapter[data-discipline="digital"] { --discipline-top:#bbdccb; --discipline-sky:#e1efd7; } #chun-five-stops .desktop-chapter[data-discipline="copy"] { --discipline-top:#f3d2ae; --discipline-sky:#fff2d4; } #chun-five-stops .desktop-chapter:not([data-discipline="creative"]) { background:linear-gradient(var(--discipline-top) 0%,var(--discipline-sky) 35%,var(--chapter-paper) 53%,var(--chapter-paper) 86%,#d2e9fa 100%); } #chun-five-stops .desktop-chapter[data-discipline="video"] .desktop-hero-copy, #chun-five-stops .desktop-chapter[data-discipline="brand"] .desktop-hero-copy { color:#fff9ee; text-shadow:0 1px 8px #102f4b20; } #chun-five-stops[data-paper="video"] .stage { background:linear-gradient(#507f97,#bdd8e9 70%,#edf3f7)!important; } #chun-five-stops[data-paper="publication"] .stage { background:linear-gradient(#e0e9da,#f8f0dc 70%,#fffdf5)!important; } #chun-five-stops[data-paper="brand"] .stage { background:linear-gradient(#8c7699,#d9c7df 75%,#fcf9fc)!important; } #chun-five-stops[data-paper="digital"] .stage { background:linear-gradient(#bbdccb,#e1efd7 70%,#f8fcfa)!important; } #chun-five-stops[data-paper="copy"] .stage { background:linear-gradient(#f3d2ae,#fff2d4 70%,#fffefa)!important; } #chun-five-stops[data-paper="video"] .category,#chun-five-stops[data-paper="brand"] .category { color:#fff9ee; } /* Delay the resting point while retaining the declaration composition. */ #chun-five-stops .desktop-declaration-scene { top:calc(var(--declaration-header,90px) - 70px); height:calc(100svh - var(--declaration-header,90px) + 70px); } #chun-five-stops .desktop-declaration-scene .desktop-statement { padding-top:calc(clamp(80px,12svh,120px) + 70px); } #chun-five-stops .desktop-declaration-exit-clouds { translate:0 -75px; } #chun-five-stops .exit-cloud-3 { width:88%; height:72%; left:-35%; top:40%; transform:rotate(-5deg); } #chun-five-stops .desktop-hero-passage .desktop-hero { background:linear-gradient(var(--discipline-top,#d2e9fa),var(--discipline-sky,#d2e9fa) 65%,var(--chapter-paper)); } #chun-five-stops .featured-scroll-hint { font-family:'Chun Mono',monospace; font-size:13px; line-height:1.5; margin:24px 0 0; opacity:.78; } #chun-five-stops .desktop-hero-copy .featured-scroll-hint { text-align:left; } #chun-five-stops .category-collection { display:none!important; } #chun-five-stops .category a.explore { display:inline-block; text-decoration:none; } /* One uninterrupted sky, with clouds allowed to cross section bounds. */ #chun-five-stops .mobile-declaration-passage { background:#507f97; } #chun-five-stops .mobile-declarations { background:linear-gradient(#3f739d 0%,#6c9cbe 48%,#507f97 100%); overflow:visible; } #chun-five-stops[data-desktop="flow"] .desktop-statement-bridge { background:#507f97; z-index:3; overflow:visible; padding:0; } #chun-five-stops .desktop-declaration-scene { top:var(--declaration-header,90px); height:calc(100svh - var(--declaration-header,90px)); width:100%; background:linear-gradient(#3f739d,#6c9cbe 48%,#507f97); } #chun-five-stops .desktop-declaration-canopy { top:-110px; height:260px; width:160%; left:-30%; z-index:1; } #chun-five-stops .desktop-declaration-scene .desktop-statement { padding:clamp(150px,22svh,190px) 7% 0; box-sizing:border-box; } #chun-five-stops .desktop-declaration-scene .desktop-declaration-exit-clouds { position:absolute; bottom:-100px; left:0; right:0; height:clamp(300px,40svh,400px); margin:0 -8.14%; translate:none; z-index:4; } #chun-five-stops .desktop-video-sky { background:#507f97; } /* Work pages retain their paper. New category scenes enter from light sky. */ #chun-five-stops .desktop-chapter:not([data-discipline="creative"]) { background:linear-gradient(var(--discipline-sky) 0%,var(--chapter-paper) 50%,var(--chapter-paper) 86%,#d2e9fa 100%); } #chun-five-stops .desktop-project-passage { background:transparent; } #chun-five-stops .work-backdrop::after { content:none; } #chun-five-stops .desktop-chapter:not([data-discipline="video"]) .desktop-hero { background:linear-gradient(#d2e9fa 0%,var(--discipline-top,#d2e9fa) 28%,var(--discipline-sky,#d2e9fa) 65%,var(--chapter-paper)); } #chun-five-stops[data-paper="publication"] .stage { background:linear-gradient(#d2e9fa,#e0e9da 28%,#f8f0dc 70%,#fffdf5)!important; } #chun-five-stops[data-paper="brand"] .stage { background:linear-gradient(#d2e9fa,#8c7699 28%,#d9c7df 75%,#fcf9fc)!important; } #chun-five-stops[data-paper="digital"] .stage { background:linear-gradient(#d2e9fa,#bbdccb 28%,#e1efd7 70%,#f8fcfa)!important; } #chun-five-stops[data-paper="copy"] .stage { background:linear-gradient(#d2e9fa,#f3d2ae 28%,#fff2d4 70%,#fffefa)!important; } #chun-five-stops[data-paper="video"] .category-name,#chun-five-stops[data-paper="video"] .category-line,#chun-five-stops[data-paper="video"] .category small,#chun-five-stops[data-paper="video"] .category .featured-scroll-hint, #chun-five-stops[data-paper="brand"] .category-name,#chun-five-stops[data-paper="brand"] .category-line,#chun-five-stops[data-paper="brand"] .category small,#chun-five-stops[data-paper="brand"] .category .featured-scroll-hint { color:#fff9ee!important; } #chun-five-stops .mobile-intro-flow { position:relative; z-index:3; overflow:visible; } /* Mobile reading phases use paper colors; headings remain visible during entry. */ #chun-five-stops[data-mobile-phase="work"] .stage { background:var(--work-color,#fffaf3)!important; } #chun-five-stops[data-mobile-phase="work"] .category, #chun-five-stops[data-mobile-phase="work"] .category-name, #chun-five-stops[data-mobile-phase="work"] .category-line, #chun-five-stops[data-mobile-phase="work"] .category small, #chun-five-stops[data-mobile-phase="work"] .category .featured-scroll-hint { color:#102f4b!important; } #chun-five-stops .mobile-declarations::after { bottom:-100px; background-image:url('/motion-assets/cloud-bank-cartoon.webp'),linear-gradient(transparent 0%,#507f97 80%); } /* Keep category content readable while the surrounding sky changes. */ #chun-five-stops .desktop-hero-copy .desktop-rise-text, #chun-five-stops .desktop-hero-copy.desktop-rise-trial, #chun-five-stops .desktop-outbound.desktop-scroll-reveal { mask-image:none; opacity:1; } #chun-five-stops .desktop-hero-copy .desktop-rise-text { transform:none; } #chun-five-stops .desktop-hero-copy .desktop-line { opacity:1; visibility:visible; } #chun-five-stops .desktop-hero-copy { color:#102f4b; } #chun-five-stops .desktop-chapter[data-discipline="brand"] .desktop-hero-copy, #chun-five-stops .desktop-chapter[data-discipline="video"] .desktop-hero-copy, #chun-five-stops .desktop-chapter[data-discipline="brand"] .desktop-title, #chun-five-stops .desktop-chapter[data-discipline="video"] .desktop-title, #chun-five-stops .desktop-chapter[data-discipline="brand"] .desktop-line, #chun-five-stops .desktop-chapter[data-discipline="video"] .desktop-line, #chun-five-stops .desktop-chapter[data-discipline="brand"] .desktop-number, #chun-five-stops .desktop-chapter[data-discipline="video"] .desktop-number { color:#fff9ee!important; } #chun-five-stops .desktop-chapter[data-discipline="brand"] .desktop-hero-actions .desktop-button, #chun-five-stops .desktop-chapter[data-discipline="video"] .desktop-hero-actions .desktop-button { color:#fff9ee; border-color:#fff9ee; background:#102f4b; } /* Category-specific silhouettes cover the joins in document flow. */ #chun-five-stops .category-transition { position:relative; height:clamp(130px,15vw,220px); margin-top:-35px; pointer-events:none; z-index:4; } #chun-five-stops .category-transition img { display:block; width:100%; height:100%; object-fit:fill; max-width:none; } #chun-five-stops .desktop-chapter { background:var(--chapter-paper)!important; } #chun-five-stops .desktop-chapter .desktop-hero { background:linear-gradient(var(--discipline-top,#d2e9fa),var(--discipline-sky,#d2e9fa) 65%,var(--chapter-paper))!important; } #chun-five-stops .desktop-cloud-entrance-space { height:clamp(100px,17svh,180px); background:linear-gradient(#d2e9fa,#3f739d); } #chun-five-stops .declaration-original-clouds { position:absolute; top:-170px; left:0; width:100%; height:300px; background:transparent!important; overflow:visible; pointer-events:none; } #chun-five-stops .mobile-category-transition { position:absolute; top:100%; left:0; width:100%; height:180px; margin-top:-100px; z-index:10; } #chun-five-stops .mobile-category-transition[hidden] { display:none; } #chun-five-stops .mobile-declaration-passage { margin-bottom:-2px; } #chun-five-stops .mobile-declarations::after { bottom:-100px; height:300px; z-index:1; } #chun-five-stops .desktop-declaration-row span { display:inline-block; -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--declaration-edge,0%) - 22%),transparent var(--declaration-edge,0%)); mask-image:linear-gradient(90deg,#000 calc(var(--declaration-edge,0%) - 22%),transparent var(--declaration-edge,0%)); } #chun-five-stops:not([data-desktop="flow"]) .mobile-intro-flow { background:#507f97; padding-bottom:100px; margin-bottom:-6px; border-bottom:0; } #chun-five-stops:not([data-desktop="flow"]) .journey,#chun-five-stops:not([data-desktop="flow"]) .stage { border-top:0!important; outline:0; } #chun-five-stops:not([data-desktop="flow"]) .mobile-declaration-passage { border:0; } /* Use the existing character-free collection scenery only at the boundary. */ #chun-five-stops .category-transition { width:100%; height:auto; aspect-ratio:3/1; margin:0; padding:0; overflow:hidden; box-sizing:border-box; } #chun-five-stops .category-transition img { width:100%; height:100%; object-fit:contain; margin:0; mask-image:linear-gradient(#000 92%,transparent 100%); } #chun-five-stops .desktop-chapter .desktop-hero { background:linear-gradient(var(--entry-color),var(--discipline-top,var(--entry-color)) 35%,var(--chapter-paper))!important; } #chun-five-stops:not([data-desktop="flow"]) .stage { background:linear-gradient(var(--entry-color,#507f97),var(--mobile-scene-color,var(--entry-color,#507f97)) 35%,var(--work-color,#fffaf3))!important; } #chun-five-stops[data-paper="video"] { --mobile-scene-color:#507f97; } #chun-five-stops[data-paper="publication"] { --mobile-scene-color:#e0e9da; } #chun-five-stops[data-paper="brand"] { --mobile-scene-color:#8c7699; } #chun-five-stops[data-paper="digital"] { --mobile-scene-color:#bbdccb; } #chun-five-stops[data-paper="copy"] { --mobile-scene-color:#f3d2ae; } #chun-five-stops[data-paper="creative"] { --mobile-scene-color:#f7f2d6; } #chun-five-stops:not([data-desktop="flow"])[data-mobile-phase="work"] .stage { background:var(--work-color)!important; } #chun-five-stops .mobile-category-transition { top:100%; height:auto; aspect-ratio:3/1; margin-top:0; } /* Homepage uses the same hero palettes as the collection pages. */ #chun-five-stops .desktop-chapter[data-discipline="video"] .desktop-hero, #chun-five-stops[data-paper="video"]:not([data-desktop="flow"]) .stage { background:radial-gradient(ellipse at 83% 48%,#58899255,transparent 45%),linear-gradient(120deg,#3b6176,#507f97)!important; } #chun-five-stops .desktop-chapter[data-discipline="publication"] .desktop-hero, #chun-five-stops[data-paper="publication"]:not([data-desktop="flow"]) .stage { background:linear-gradient(105deg,#fcf8ed 0%,#f8f0dc 62%,#e0e9da 100%)!important; } #chun-five-stops .desktop-chapter[data-discipline="brand"] .desktop-hero, #chun-five-stops[data-paper="brand"]:not([data-desktop="flow"]) .stage { background:radial-gradient(ellipse at 80% 75%,#b49fab,#8c7699 65%,#73617f)!important; } #chun-five-stops .desktop-chapter[data-discipline="digital"] .desktop-hero, #chun-five-stops[data-paper="digital"]:not([data-desktop="flow"]) .stage { background:linear-gradient(120deg,#e1efd7,#bbdccb)!important; } #chun-five-stops .desktop-chapter[data-discipline="copy"] .desktop-hero, #chun-five-stops[data-paper="copy"]:not([data-desktop="flow"]) .stage { background:linear-gradient(120deg,#fff2d4,#f3d2ae)!important; } #chun-five-stops .desktop-chapter[data-discipline="creative"] .desktop-hero { background:#fffaf0!important; } #chun-five-stops:not([data-desktop="flow"])[data-mobile-phase="work"] .stage { background:var(--work-color)!important; } #chun-five-stops[data-desktop="flow"] .category-transition { margin-top:clamp(-130px,-9vw,-65px); } #chun-five-stops .desktop-project { padding-bottom:28px; } #chun-five-stops .desktop-project-actions { margin-bottom:0; } /* The departing arc immediately reveals the following category content. */ #chun-five-stops .mobile-category-transition { aspect-ratio:auto; } #chun-five-stops .mobile-category-transition > img { height:auto; aspect-ratio:3/1; } #chun-five-stops .mobile-next-category { min-height:100svh; box-sizing:border-box; padding:28px 7% 60px; color:#102f4b; } #chun-five-stops .mobile-next-category small { font-size:11px; } #chun-five-stops .mobile-next-category h2 { font-family:'Chun Hand',cursive; font-size:clamp(32px,8vw,44px); line-height:1.2; margin:24px 0; } #chun-five-stops .mobile-next-category p { font-size:16px; line-height:1.6; } #chun-five-stops .category .featured-scroll-hint, #chun-five-stops .mobile-next-category .featured-scroll-hint { font-size:12px; line-height:1.5; text-align:left; margin:16px 0 0; } #chun-five-stops .mobile-next-category a { display:inline-block; text-decoration:none; margin-top:16px; } #chun-five-stops .mobile-next-category[data-discipline="publication"] { background:linear-gradient(105deg,#fcf8ed,#f8f0dc 62%,#e0e9da); } #chun-five-stops .mobile-next-category[data-discipline="brand"] { color:#fff8f1; background:radial-gradient(ellipse at 80% 75%,#b49fab,#8c7699 65%,#73617f); } #chun-five-stops .mobile-next-category[data-discipline="digital"] { background:linear-gradient(120deg,#e1efd7,#bbdccb); } #chun-five-stops .mobile-next-category[data-discipline="copy"] { background:linear-gradient(120deg,#fff2d4,#f3d2ae); } #chun-five-stops .mobile-next-category[data-discipline="creative"] { background:#fffaf0; } #chun-five-stops:not([data-desktop="flow"]) .mobile-intro-flow, #chun-five-stops .mobile-declaration-passage { background:linear-gradient(90deg,#3b6176,#507f97); } #chun-five-stops .mobile-declarations { background:linear-gradient(#3f739d,#6c9cbe 48%,#3b6176); } #chun-five-stops .mobile-declarations::after { background-image:url('/motion-assets/cloud-bank-cartoon.webp'),linear-gradient(transparent,#3b6176 80%); } #chun-five-stops[data-paper="video"]:not([data-desktop="flow"]):not([data-mobile-phase="work"]) .stage { background:linear-gradient(90deg,#3b6176,#507f97)!important; } #chun-five-stops .mobile-next-category a { pointer-events:auto; } /* Extend the cloud silhouette past the Video join, with transparent tails. */ #chun-five-stops .mobile-declarations::after { height:430px; bottom:-180px; background-image:url("/motion-assets/cloud-bank-cartoon.webp"); background-size:100% 100%; background-repeat:no-repeat; z-index:5; } #chun-five-stops:not([data-desktop="flow"]) .mobile-intro-flow { background:linear-gradient(90deg,#3b6176,#507f97)!important; } #chun-five-stops .mobile-declaration-passage { background:linear-gradient(90deg,#3b6176,#507f97)!important; } #chun-five-stops .desktop-declaration-scene .desktop-declaration-exit-clouds { height:clamp(350px,45svh,460px); bottom:-160px; } #chun-five-stops .desktop-video-sky { background:linear-gradient(90deg,#3b6176,#507f97); } /* Keep cloud silhouettes proportional and carry one palette across the join. */ #chun-five-stops .mobile-declarations::before, #chun-five-stops .mobile-declarations::after { background-size:cover; background-position:center; } #chun-five-stops .mobile-declarations::after { height:clamp(170px,33.333vw,300px); bottom:-45px; } #chun-five-stops:not([data-desktop="flow"]) .mobile-intro-flow { padding-bottom:32px; margin-bottom:0; } #chun-five-stops .desktop-declaration-scene, #chun-five-stops .mobile-declarations { background:linear-gradient(180deg,#3f739d 0%,#6c9cbe 45%,transparent 88%),linear-gradient(90deg,#3b6176,#507f97); } #chun-five-stops[data-desktop="flow"] .desktop-statement-bridge, #chun-five-stops .desktop-video-sky { background:linear-gradient(90deg,#3b6176,#507f97); } #chun-five-stops .desktop-chapter[data-discipline="video"] .desktop-hero { background:linear-gradient(90deg,#3b6176,#507f97)!important; } /* Desktop reading paper uses the same drawings and base colors as mobile. */ #chun-five-stops .desktop-project-passage .desktop-project { min-height:0; padding-bottom:16px; background-color:var(--chapter-paper); background-size:100% 100%; background-repeat:no-repeat; isolation:isolate; } #chun-five-stops .desktop-paper-art { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; } #chun-five-stops [data-discipline="publication"] .desktop-project { background-image:linear-gradient(90deg,transparent 48%,#6d57430c 49.6%,#fffdfa90 50%,#6d574312 50.4%,transparent 52%); } #chun-five-stops [data-discipline="copy"] .desktop-project { background-color:#fffdfa; background-image:linear-gradient(90deg,#a85f5a26 1px,transparent 1px),linear-gradient(#a85f5a26 1px,transparent 1px); background-size:36px 36px; background-repeat:repeat; } #chun-five-stops [data-discipline="creative"] .desktop-paper-art { display:none; } /* Show the whole cloud bank at its native 3:1 ratio, without cover cropping. */ #chun-five-stops .mobile-declarations::before, #chun-five-stops .mobile-declarations::after { left:0; width:100%; height:auto; aspect-ratio:3/1; background-size:contain; background-position:center; } #chun-five-stops .desktop-declaration-scene .desktop-declaration-exit-clouds { height:auto; aspect-ratio:3/1; bottom:-80px; margin:0; overflow:visible; } #chun-five-stops .desktop-declaration-exit-clouds .desktop-exit-cloud { display:none; } #chun-five-stops .desktop-declaration-exit-clouds .exit-cloud-0 { display:block; position:static; width:100%; height:auto; object-fit:contain; transform:none; } #chun-five-stops .desktop-video-sky { height:80px; } /* Reading controls remain above the anchored arc. */ #chun-five-stops .reading-arc { position:absolute; bottom:0; left:0; width:100%; overflow:hidden; pointer-events:none; } #chun-five-stops .reading-arc img { display:block; position:absolute; bottom:0; left:0; width:100%; height:auto; max-width:none; } #chun-five-stops .desktop-reading-arc { height:clamp(80px,12vw,160px); z-index:-1; } #chun-five-stops .desktop-reading-arc img { mask-image:linear-gradient(#000 92%,transparent 100%); } #chun-five-stops .desktop-project-passage .desktop-project:has(.desktop-reading-arc) { padding-bottom:calc(clamp(80px,12vw,160px) + 20px); } #chun-five-stops .mobile-reading-arc { height:var(--reading-arc-height,0px); z-index:7; } #chun-five-stops .mobile-reading-arc[hidden] { display:none; } #chun-five-stops:not([data-desktop="flow"]) .work-actions { padding-bottom:var(--reading-arc-height,0px); background:none!important; } #chun-five-stops:not([data-desktop="flow"]) .work-actions .reading-hint { background:var(--work-color); width:fit-content; } /* Bring both full cloud banks into the declaration viewport. */ #chun-five-stops .mobile-declarations::before { top:-10px; transform:scaleY(-1); } #chun-five-stops .mobile-declarations::after { bottom:24px; } #chun-five-stops .mobile-declarations, #chun-five-stops .desktop-declaration-scene { background:linear-gradient(180deg,#736c87 0%,#a49bb3 58%,#8b819e 78%,transparent 100%),linear-gradient(90deg,#3b6176,#507f97); } /* Reserve the native scene height so every arc prop remains visible. */ #chun-five-stops .reading-arc { overflow:visible; } #chun-five-stops .desktop-reading-arc { height:auto; aspect-ratio:3/1; } #chun-five-stops .desktop-project-passage .desktop-project:has(.desktop-reading-arc) { padding-bottom:calc(100vw / 3 + 20px); } #chun-five-stops .mobile-reading-arc { height:var(--reading-arc-height,0px); } /* Each cloud band owns both adjoining colors; the join follows opaque pixels. */ #chun-five-stops .declaration-cloud-band { position:absolute; left:0; width:100%; overflow:hidden; pointer-events:none; z-index:3; } #chun-five-stops .declaration-cloud-band svg { display:block; position:absolute; left:-15%; top:0; width:130%; height:auto; } #chun-five-stops .mobile-declaration-top, #chun-five-stops .mobile-declaration-bottom { height:calc(100vw * 1.3 / 3); } #chun-five-stops .desktop-declaration-top, #chun-five-stops .desktop-declaration-bottom { height:calc(100vw * 1.3 / 9.3); } #chun-five-stops .mobile-declaration-top, #chun-five-stops .desktop-declaration-top { top:0; } #chun-five-stops .mobile-declaration-bottom, #chun-five-stops .desktop-declaration-bottom { bottom:0; } #chun-five-stops .mobile-declarations::before, #chun-five-stops .mobile-declarations::after { content:none; } #chun-five-stops .mobile-declarations, #chun-five-stops .desktop-declaration-scene, #chun-five-stops .mobile-declaration-passage, #chun-five-stops[data-desktop="flow"] .desktop-statement-bridge { background:linear-gradient(90deg,#736c87,#a49bb3)!important; } #chun-five-stops:not([data-desktop="flow"]) .mobile-intro-flow { padding-bottom:0; margin-bottom:0; } #chun-five-stops .mobile-declarations { padding:calc(100vw * 1.3 / 3 + 8px) 7%; gap:16px; justify-content:center; } #chun-five-stops .mobile-declaration-line { position:relative; z-index:4; flex-shrink:0; } #chun-five-stops .mobile-declaration-line span { font-size:clamp(25px,6.2vw,40px); line-height:1.45; } #chun-five-stops .desktop-declaration-scene { display:flex; flex-direction:column; justify-content:center; } #chun-five-stops .desktop-declaration-scene .desktop-statement { margin:0; padding:0 7%; width:100%; gap:16px; border:0; } #chun-five-stops .mobile-about-flow { padding-bottom:32px; } #chun-five-stops .desktop-declaration-row span { font-size:clamp(28px,3.5vw,52px); line-height:1.2; } /* Paint the SVG join beneath its fractional-pixel edge with the same end color. */ #chun-five-stops .declaration-cloud-band { border:0; outline:0; } #chun-five-stops .mobile-declaration-top, #chun-five-stops .desktop-declaration-top { background:linear-gradient(90deg,#736c87,#a49bb3); } #chun-five-stops .mobile-declaration-bottom, #chun-five-stops .desktop-declaration-bottom { background:linear-gradient(90deg,#3b6176,#507f97); } #chun-five-stops .declaration-cloud-band::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:inherit; pointer-events:none; } /* A broad low floor with smaller original props shares the reading paper. */ #chun-five-stops .desktop-reading-arc { aspect-ratio:1800/330; } #chun-five-stops .desktop-project-passage .desktop-project:has(.desktop-reading-arc) { padding-bottom:calc(100vw * 330 / 1800 + 16px); } #chun-five-stops .desktop-reading-arc img { mask-image:linear-gradient(#000 88%,transparent 100%); } /* The actor crosses before the reading controls enter. */ #chun-five-stops:not([data-desktop="flow"]) .work-actions { transition:opacity .2s ease; } #chun-five-stops:not([data-desktop="flow"])[data-returning="moving"] .work-actions { opacity:0; visibility:hidden!important; pointer-events:none; } #chun-five-stops:not([data-desktop="flow"])[data-returning="moving"] .work-actions * { visibility:hidden!important; pointer-events:none!important; } /* Contact and its footer occupy the final viewport below the measured header. */ #chun-five-stops .contact-section { scroll-margin-top:var(--header-height,90px); } #chun-five-stops .contact-section > .page-footer { grid-column:1/-1; padding:0; align-self:end; } #chun-five-stops[data-desktop="flow"] .contact-section { min-height:calc(100svh - var(--header-height,90px)); padding:clamp(24px,4svh,44px) 7%; gap:24px 48px; grid-template-rows:1fr auto; align-items:start; box-sizing:border-box; } #chun-five-stops[data-desktop="flow"] .contact-form { gap:16px 20px; } #chun-five-stops[data-desktop="flow"] .contact-form textarea { height:clamp(100px,18svh,180px); min-height:100px; } /* Center the whole staggered statement, including on wide monitors. */ #chun-five-stops .desktop-declaration-scene .desktop-statement { width:min(86%,1100px); max-width:none; margin:0 auto; padding:0; flex-wrap:nowrap; box-sizing:border-box; } #chun-five-stops .desktop-declaration-row:first-child { align-self:flex-start; } #chun-five-stops .desktop-declaration-row:nth-child(2) { align-self:center; } #chun-five-stops .desktop-declaration-row:nth-child(3) { align-self:flex-end; } /* The complete project, controls and freshly painted floor share one viewport. */ #chun-five-stops[data-desktop="flow"] .desktop-project-passage .desktop-project { --reading-floor-height:calc(100vw * var(--reading-floor-ratio,0)); --project-art-budget:calc(100svh - var(--chapter-header,90px) - var(--reading-floor-height) - 110px); min-height:calc(100svh - var(--chapter-header,90px)); display:flex; flex-direction:column; padding:clamp(20px,3svh,32px) 7% 20px; } #chun-five-stops[data-desktop="flow"] .desktop-project-passage .desktop-project:has(.desktop-reading-arc) { padding-bottom:calc(var(--reading-floor-height) + 12px); } #chun-five-stops[data-desktop="flow"] .desktop-project-grid { width:100%; flex:1; grid-template-columns:minmax(120px,.55fr) minmax(0,1.4fr) minmax(0,1.3fr); gap:clamp(20px,2.4vw,40px); } #chun-five-stops[data-desktop="flow"] .desktop-project-copy { gap:10px; } #chun-five-stops[data-desktop="flow"] .desktop-project-title { font-size:clamp(21px,1.9vw,32px); } #chun-five-stops[data-desktop="flow"] .desktop-project-copy p { font-size:14px; line-height:1.6; } #chun-five-stops[data-desktop="flow"] .desktop-selected { padding-top:8px; } #chun-five-stops[data-desktop="flow"] .desktop-returning { max-height:max(140px,min(var(--project-art-budget),280px)); } #chun-five-stops[data-desktop="flow"] .desktop-work-image { max-height:max(160px,min(var(--project-art-budget),380px)); } #chun-five-stops[data-desktop="flow"] .desktop-project-actions { width:100%; margin:16px auto 0; flex-shrink:0; } #chun-five-stops[data-desktop="flow"] .desktop-reading-arc { height:var(--reading-floor-height); aspect-ratio:auto; overflow:hidden; background:none; } #chun-five-stops[data-desktop="flow"] .desktop-reading-arc img { mask-image:none; -webkit-mask-image:none; } @media (max-height:720px) { #chun-five-stops[data-desktop="flow"] .desktop-project-passage .desktop-project { padding-top:16px; } #chun-five-stops[data-desktop="flow"] .desktop-project-copy { gap:8px; } #chun-five-stops[data-desktop="flow"] .desktop-project-title { font-size:21px; } #chun-five-stops[data-desktop="flow"] .desktop-project-copy p { font-size:13px; line-height:1.5; } #chun-five-stops[data-desktop="flow"] .desktop-project-actions { margin-top:12px; } } /* The band owns its upper edge; only its lower overlap uses the next color. */ #chun-five-stops .declaration-cloud-band svg { top:-1px; } #chun-five-stops .declaration-cloud-band::after { background:var(--cloud-bottom-paint); } #chun-five-stops[data-desktop="flow"] .desktop-career-cloud { position:relative; height:calc(100vw * 1.3 / 9.3); margin:-1px 0; border:0; } #chun-five-stops .mobile-career-cloud { position:relative; height:calc(100vw * 1.3 / 3); margin:-1px 0; border:0; } /* Keep the corridor as one image and bring its controls back to the content. */ #chun-five-stops[data-desktop="flow"] [data-discipline="creative"] .desktop-project { min-height:0; display:block; padding:32px 7% 22px; background-color:#fffaf0; background-size:100% 100%; background-position:center; background-repeat:no-repeat; } #chun-five-stops[data-desktop="flow"] [data-discipline="creative"] .desktop-project-grid { flex:none; } #chun-five-stops[data-desktop="flow"] [data-discipline="creative"] .desktop-project-actions { margin-top:24px; } #chun-five-stops[data-desktop="flow"] [data-discipline="creative"] .desktop-returning { max-height:180px; } #chun-five-stops[data-desktop="flow"] [data-discipline="creative"] .desktop-work-image { max-height:280px; } #chun-five-stops:not([data-desktop="flow"]) .mobile-return-rig { z-index:8; } /* A compact mobile contact screen includes the form and footer below the header. */ #chun-five-stops:not([data-desktop="flow"]) .contact-section { min-height:calc(100dvh - var(--header-height,100px)); box-sizing:border-box; padding:16px 6%; grid-template-columns:1fr; grid-template-rows:auto 1fr auto; gap:12px; } #chun-five-stops:not([data-desktop="flow"]) .contact-intro h2 { font-size:clamp(32px,7vw,44px); line-height:1.1; margin:8px 0 10px; } #chun-five-stops:not([data-desktop="flow"]) .contact-intro h3 { font-size:20px; line-height:1.2; max-width:none; margin:0 0 12px; } #chun-five-stops:not([data-desktop="flow"]) .whatsapp-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px 12px; padding:9px 12px; margin:0; width:auto; max-width:none; } #chun-five-stops:not([data-desktop="flow"]) .whatsapp-card strong { font-size:15px; } #chun-five-stops:not([data-desktop="flow"]) .whatsapp-card span:last-child { grid-column:1/-1; font-size:9px; } #chun-five-stops:not([data-desktop="flow"]) .contact-form { grid-template-columns:1fr 1fr; gap:8px 12px; } #chun-five-stops:not([data-desktop="flow"]) .contact-form label { gap:3px; } #chun-five-stops:not([data-desktop="flow"]) .contact-form label:nth-child(-n+2) { grid-column:auto; } #chun-five-stops:not([data-desktop="flow"]) .contact-form label:nth-child(n+3) { grid-column:1/-1; } #chun-five-stops:not([data-desktop="flow"]) .contact-form label>span { font-size:9px; } #chun-five-stops:not([data-desktop="flow"]) .contact-form input { min-height:32px; padding:4px 0; } #chun-five-stops:not([data-desktop="flow"]) .contact-form textarea { height:clamp(60px,12svh,110px); min-height:60px; padding:4px 0; } #chun-five-stops:not([data-desktop="flow"]) .contact-submit-row { gap:8px 12px; } #chun-five-stops:not([data-desktop="flow"]) .contact-submit-row button { min-height:36px; padding:7px 12px; } #chun-five-stops:not([data-desktop="flow"]) .contact-submit-row small { font-size:9px; line-height:1.4; flex:1; min-width:120px; } #chun-five-stops:not([data-desktop="flow"]) .contact-section>.page-footer { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; gap:5px 12px; font-size:9px; } /* Percentage width and aspect ratio agree even when the viewport has a scrollbar. */ #chun-five-stops .mobile-declaration-top, #chun-five-stops .mobile-declaration-bottom, #chun-five-stops .mobile-career-cloud { height:auto; aspect-ratio:30/13; } #chun-five-stops .desktop-declaration-top, #chun-five-stops .desktop-declaration-bottom, #chun-five-stops[data-desktop="flow"] .desktop-career-cloud { height:auto; aspect-ratio:93/13; } #chun-five-stops .declaration-cloud-band svg { top:0; height:100%; } #chun-five-stops .declaration-cloud-band::after { content:none; } #chun-five-stops[data-desktop="flow"] [data-discipline="creative"] .desktop-work-image { max-height:max(160px,min(var(--project-art-budget),380px)); } /* Keep sole-to-ground contact exact while scrolling along the return arc. */ #chun-five-stops:not([data-desktop="flow"])[data-returning="moving"] .mobile-return-rig { animation:none; } /* The entering scene starts exactly where the reading floor was resting. */ #chun-five-stops:not([data-desktop="flow"]) .mobile-category-transition { top:calc(100% - var(--reading-arc-height,0px)); } /* Give Latest writing a short pause below the preceding section. */ #chun-five-stops[data-desktop="flow"] [data-discipline="creative"] .desktop-project { padding-top:clamp(56px,7svh,80px); } /* Paint beyond the last SVG row into the identical adjoining Video sky. */ #chun-five-stops .desktop-declaration-bottom, #chun-five-stops .mobile-declaration-bottom { bottom:-2px; overflow:visible; } #chun-five-stops .desktop-declaration-bottom::before, #chun-five-stops .mobile-declaration-bottom::before { content:''; position:absolute; left:0; right:0; bottom:-3px; height:8px; background:var(--cloud-bottom-paint); } /* Career rests for three wheel steps before Contact enters. */ #chun-five-stops .career-hold { position:relative; background:#d2e9fa; } #chun-five-stops .career-hold #career { position:sticky; top:var(--career-rest-top,var(--header-height,90px)); min-height:calc(100svh - var(--header-height,90px)); box-sizing:border-box; background:#d2e9fa; } /* Restore the roomy WhatsApp card while keeping the compact form. */ #chun-five-stops[data-desktop="flow"] .whatsapp-card { display:flex; flex-direction:column; align-items:flex-start; width:fit-content; min-width:240px; min-height:126px; max-width:100%; padding:18px 22px; gap:10px; margin-top:24px; box-sizing:border-box; } #chun-five-stops[data-desktop="flow"] .whatsapp-card strong { font-size:24px; } #chun-five-stops:not([data-desktop="flow"]) .whatsapp-card { display:flex; flex-direction:column; align-items:flex-start; width:fit-content; min-width:218px; min-height:110px; max-width:100%; padding:14px 18px; gap:8px; margin-top:12px; box-sizing:border-box; } #chun-five-stops:not([data-desktop="flow"]) .whatsapp-card strong { font-size:20px; } #chun-five-stops:not([data-desktop="flow"]) .whatsapp-card span:last-child { font-size:11px; } /* Separate the four header destinations while preserving the right-hand button. */ #chun-five-stops .site-nav { column-gap:16px; } @media(max-width:550px) { #chun-five-stops .site-nav { column-gap:12px; } }