/* A single flowing line, with room on both sides of every stop. */
.journey-stops{padding:130px 35px 150px;gap:170px}
.journey-card{width:min(460px,49%)}
.journey-card:nth-of-type(odd){margin-right:7%;margin-left:0}
.journey-card:nth-of-type(even){margin-left:12%;margin-right:0}
.journey-dot{top:50%;bottom:auto;right:-28px;transform:translateY(-50%)}
.journey-card:nth-of-type(even) .journey-dot{left:-28px;right:auto}
.timeline-ready .journey-card,.timeline-ready .journey-card.incoming{transform:none;transition:none}
.journey-line .line-progress{stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* The dark section extends physically behind the translucent sidebar. */
@media(min-width:1100px){
 .horizontal-work:before{content:'';position:absolute;top:0;bottom:0;left:calc(-1 * var(--side-width));width:var(--side-width);background:inherit;pointer-events:none}
 .journey-sidebar .side-profile,.journey-sidebar .side-numbers,.journey-sidebar nav,.journey-sidebar .side-email{background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.22)!important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);color:inherit!important;transition:color .2s!important}
 .journey-sidebar [data-surface="light"]{color:#303529!important}
 .journey-sidebar [data-surface="dark"]{color:#f0f1e8!important}
 .journey-sidebar nav a{background:rgba(255,255,255,.16)!important;color:inherit!important}
 .journey-sidebar nav a[aria-current]{background:#f5ff2e!important;color:#24291d!important}
 .journey-sidebar .side-numbers[data-surface="dark"] b{color:#f5ff2e!important}
 .journey-sidebar .side-numbers[data-surface="light"] b{color:#69751d!important}
}
/* Two films live inside the selected-work rail. */
.horizontal-work .film-project{flex-basis:clamp(340px,36vw,530px);width:clamp(340px,36vw,530px)}
.film-mockup{display:flex;align-items:center;justify-content:center;isolation:isolate}
.device-laptop{position:relative;width:92%;transform:perspective(900px) rotateY(-11deg) rotateZ(-3deg);filter:drop-shadow(0 25px 25px #0005);animation:device-drift 8s ease-in-out infinite alternate;animation-play-state:paused}
.cool .device-laptop{transform:perspective(900px) rotateY(10deg) rotateZ(3deg);animation-delay:-3s}
.is-animating .device-laptop{animation-play-state:running}
.device-screen{position:relative;aspect-ratio:16/10;border:7px solid #272a2d;border-top-width:11px;border-bottom-width:14px;border-radius:12px 12px 3px 3px;background:#080a0c;overflow:hidden;box-shadow:0 0 0 1px #858990}
.device-screen video{width:100%;height:100%;display:block;object-fit:contain;background:#07090b}
.device-camera{position:absolute;top:-8px;left:50%;width:4px;height:4px;border-radius:50%;background:#505b60}
.device-base{position:relative;width:112%;height:13px;left:-6%;background:linear-gradient(#d0d3d5,#767a80 65%,#303338);border-radius:1px 1px 50% 50%/1px 1px 100% 100%;box-shadow:0 3px 0 #101215}
.device-base:before{content:'';display:block;width:17%;height:4px;border-radius:0 0 6px 6px;background:#65696d;margin:auto}
.film-play{position:absolute;left:0;bottom:12px;display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:#f5ff2e;color:#24291d;font-size:15px;z-index:3}
.atmosphere-film-warm{background:radial-gradient(ellipse,#ba895666,transparent 68%)}
.atmosphere-film-cool{background:radial-gradient(ellipse,#698eae66,transparent 68%)}
@keyframes device-drift{from{translate:0 7px;rotate:-1deg}to{translate:0 -8px;rotate:1deg}}
/* Scroll controls every word; unrevealed words have zero opacity. */
.reveal-track{position:relative;height:190svh}
.reveal-track .skills-intro{position:sticky;top:0;min-height:100svh;height:100svh;display:flex;flex-direction:column;justify-content:center;margin:0;padding:40px 0;gap:40px}
.reveal-track .skills-intro h2{font-size:clamp(64px,min(10vw,14svh),140px);line-height:1;max-width:780px;margin:0 auto;letter-spacing:-4px}
.reveal-track .skills-intro .scroll-statement{font-size:clamp(30px,min(4.5vw,6svh),60px);line-height:1.4;max-width:1100px;margin:0 auto}
.word-reveal-ready .split-word{opacity:0;transition:none}
.skill-rows{margin-top:90px}
@media(max-width:700px){
 .journey-stops{padding:75px 28px 90px;gap:110px}
 .journey-card{width:calc(100% - 15px);margin-left:0!important;margin-right:0!important}
 .journey-dot,.journey-card:nth-of-type(even) .journey-dot{right:-22px;left:auto}
 .horizontal-work .film-project{width:85vw;flex-basis:85vw}
 .reveal-track{height:210svh}
 .reveal-track .skills-intro{gap:35px;padding:70px 0 35px}
 .reveal-track .skills-intro h2{font-size:clamp(56px,12svh,88px);letter-spacing:-2px}
 .reveal-track .skills-intro .scroll-statement{font-size:clamp(23px,4svh,31px);letter-spacing:-.5px}
}
@media(prefers-reduced-motion:reduce){.reveal-track{height:auto}.reveal-track .skills-intro{position:relative;height:auto;min-height:0}.word-reveal-ready .split-word{opacity:1!important}.device-laptop{animation:none}}